logo标签列表

当鼠标悬停时改变div背景颜色

csscolorsbackgroundhover
99
我想让鼠标悬停时
的背景颜色改变。
 

div {background:white;}
  div:hover {background:grey; width:100%; display:block; text-decoration:none;}

只有在

内部的链接才会获得背景颜色。

我应该怎么做，才能使整个

都获得相同的背景颜色呢？

谢谢

编辑：
如何使整个

作为一个链接-当您在
的任何地方单击时，将您带到一个地址。

请尝试使用此链接：http://codebins.com/codes/home/4ldqpc0 - gaurang171
10个回答
121
"a:hover"字面意思是告诉浏览器当鼠标悬停在<a>-tag上时更改属性。也许您的意思是使用"the div:hover"，以便在选择div时触发。
为确保仅更改特定的div，请给它一个id（"<div id='something'>"），并使用CSS "#something:hover {...}"。如果要编辑一组divs，请将它们转换成一个类（"<div class='else'>"）并在这种情况下使用CSS ".else {...}"（注意类名前的句点！）
46

使用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>

29

不需要放置锚点。若要在悬停时更改 div 的样式，则更改 div 的背景颜色。

.div_hover {
  background-color: #FFFFFF;
}

.div_hover:hover {
  background-color: #000000;
}
<div class="div_hover"> Change div background color on hover</div>

18

如果要让整个 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>

祝你好运！

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 从红色更改为蓝色。

5

设置

display: block;

在a上添加一些高度

3
简单尝试CSS的“hover”属性。例如：
<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>

我希望这可以帮助你

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;
}
1
你可以像这样在锚标签中包含div：

你只需将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>

0

在你的CSS文件中，只需将属性!important设置为背景颜色不会在鼠标悬停时改变。这对我很有效。

示例：

.fbColor {
    background-color: #3b5998 !important;
    color: white;
}
你应该尝试附加更多细节到答案中，因为这显然没有完全回答问题。 - Tatranskymedved
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接