DIV背景颜色，改变onHover选项

StackOverflow https://stackoverflow.com/questions/676324

  •  21-08-2019
  •  | 
  •  

题

我试图做一个 div的背景颜色鼠标换过来

  

在div {背景：白色;}结果   在div：悬停{背景：灰色;宽度：100％;结果   显示：块;文字修饰：无;}

<强>仅的链路内部在div的得到的背景颜色即可。

我能做什么做的全格拿到背景颜色？

感谢您

修改结果 我怎样才能使整个div来充当一个链接 - 当你点击任何地方对格，带你到一个地址

有帮助吗？

解决方案

在“a:hover”的字面告诉浏览器更改属性为<a>标签，当鼠标悬停在它。你也许想的是“the div:hover”来代替，这时候选择在div触发。

只是为了确保，如果你想改变只有一个特定的DIV，给它一个ID（“<div id='something'>”），并使用CSS“#something:hover {...}”代替。如果你想编辑组的div，使它们成为一个类（“<div class='else'>”）在这种情况下使用的CSS“.else {...}”（注意类的名字前的时期！）

其他提示

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

有没有必要把锚。要改变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; }

要使整个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>

祝你好运！

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。

集

display: block;

上的一个并给予一定高度

只是一味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>

我希望这将有助于

您可以只是把锚周围的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;
}

只是要财产!important在你的CSS文件中，以便背景颜色亘古不变的变化对鼠标over.This为我工作。

示例：

.fbColor {
    background-color: #3b5998 !important;
    color: white;
}
许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top