div背景颜色，以更改悬停

91

我正在尝试将鼠标悬停在div的背景颜色上。

div {background：white;}
div a：hover {background：grey; 宽度：100％;
显示：块; 文字修饰：无；}

只有 div内的链接获得背景色。

如何使整个div获得该背景色？

谢谢

编辑：
如何使整个div充当链接-当您单击该div上的任意位置时，将您带到某个地址。

— Ionuț G. Stan
source

试试这个链接codebins.com/codes/home/4ldqpc0

— gaurang171 2012年

117

当鼠标悬停在其上时，“ a:hover”字面告诉浏览器更改<a>-tag 的属性。您可能要说的是“ the div:hover”，它将在选择div时触发。

只是要确保，如果只想更改一个特定的div，请为其指定一个id（“ <div id='something'>”）并改用CSS“ #something:hover {...}”。如果要编辑一组div，请将它们划分为一个类（“ <div class='else'>”），并.else {...}在这种情况下使用CSS“ ”（请注意该类名称前的句点！）。

— 亨里克·保罗
source

44

使用JavaScript

   <div id="mydiv" style="width:200px;background:white" onmouseover="this.style.background='gray';" onmouseout="this.style.background='white';">
    Jack and Jill went up the hill 
    To fetch a pail of water. 
    Jack fell down and broke his crown, 
    And Jill came tumbling after. 
    </div>

— 真实红色。
source

21

无需放置锚点。要更改悬停时div的样式，然后更改悬停时div的背景颜色。

<div class="div_hover"> Change div background color on hover</div>

在.css页面中

.div_hover { background-color: #FFFFFF; }

.div_hover:hover { background-color: #000000; }

— Virsj Bhorania
source

17

要使整个div充当链接，请将定位标记设置为：

display: block

并将锚标记的高度设置为100％。然后将固定高度设置为div标签。然后像平常一样设置锚标签的样式。

例如：

<html>
<head>
    <title>DIV Link</title>

    <style type="text/css">
    .link-container {
        border: 1px solid;
        width: 50%;
        height: 20px;
    }

    .link-container a {
        display: block;
        background: #c8c8c8;
        height: 100%;
        text-align: center;
    }

    .link-container a:hover {
        background: #f8f8f8;
    }

    </style>

</head>
<body>

    <div class="link-container">
        <a href="http://www.stackoverflow.com">Stack Overflow</a>
    </div>

    <div class="link-container">
        <a href="http://www.stackoverflow.com">Stack Overflow</a>
    </div>

</body> </html>

祝好运！

— 肖恩
source

11

html代码：

    <!DOCTYPE html>
    <html>
    <head><title>this is your web page</title></head>
    <body>
    <div class = "nicecolor"></div>
    </body>
    </html>

CSS代码：

    .nicecolor {
      color:red;
      width:200px;
      height:200px;
     }

    .nicecolor:hover {
      color:blue;
     }

这就是将鼠标悬停在div上时如何将其从红色更改为蓝色的方法。

— 用户名
source

5

组

display: block;

在一个并给予一定的高度

— 贾莫尔
source

3

只需尝试CSS的“悬停”属性。例如：

<html>
<head>
    <style>
        div
        {
            height:100px;
            width:100px;
            border:2px solid red;
        }
        div:hover
        {
            background-color:yellow;
        }
    </style>
</head>
<body>
            <a href="#">
                      <div id="ab">
                                <p> hello there </p>
                      </div>
            </a>
</body>

我希望这个能帮上忙

— Tajveer Singh Nijjar
source

1

您可以将锚点放在div周围。

<a class="big-link"><div>this is a div</div></a>

然后

a.big-link {
background-color: 888;
}
a.big-link:hover {
 background-color: f88;
}

— 尼基
source

0

您可以将div包含在锚标记中，如下所示：

a{
  text-decoration:none;
  color:#ffffff;
}
a div{
  width:100px;
  height:100px;
  background:#ff4500;
}
a div:hover{
  background:#0078d7;
}

<body>
<a href="http://example.com">
<div>
Hover me
</div>
</a>
</body>

展开摘要

— 恶作剧
source

-1

只需!important在css文件中设置该属性，即可使鼠标悬停时背景色不会改变。

例：

.fbColor {
    background-color: #3b5998 !important;
    color: white;
}

— T-Jayanth Dore
source

您应该尝试在答案中附加一些详细信息，因为这肯定不能完全回答问题。

— Tatranskymedved