代码之家 › 专栏 › 技术社区 › Calmarius

div背景色,以更改onhover

hover background colors css

Calmarius · 技术社区 · 7 年前

我在试着做一个决定 在鼠标悬停时div的背景颜色发生变化

div{背景:白色;}

显示:块;文本装饰:无;}

这个 获取背景色 .

我能做些什么来做这件事呢

非常感谢。

编辑:

9 回复 | 直到 12 年前

118

Henrik Paul 17 年前

" a:hover <a> -标记,当鼠标悬停在其上时。你的意思可能是“ the div:hover “相反,这将在选择div时触发。

为了确保,如果您只想更改一个特定的div,请为它指定一个id(“ <div id='something'> #something:hover {...} <div class='else'> )并使用CSS“ .else {...}

KTamas 17 年前

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

Virsj Bhorania 13 年前

没有必要抛锚。若要更改悬停时div的样式,请执行以下操作:

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

.div_hover { background-color: #FFFFFF; }

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

Shaun 17 年前

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>

祝你好运

user3689455 12 年前

html代码:

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

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

    .nicecolor:hover {
      color:blue;
     }

Jamol 17 年前

设置

display: block;

在…上 A. 给我一些高度

Tajveer Singh Nijjar 12 年前

只需尝试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>

Nicki 15 年前

你可以把锚绕在沙发上。

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

然后

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

trickymind 6 年前

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>

-1

T-Jayanth Dore 8 年前

只要把财产 !important 在你的css文件中,这样背景颜色在鼠标移动时不会改变。这对我很有用。

例子:

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