CSS 悬停选项答案

【问题标题】：CSS Hover OptionCSS 悬停选项
【发布时间】：2013-07-05 17:14:08
【问题描述】：

我学习和使用 css 和 css3 大约 2 年，但我不知道一件事，我找不到一个很好的答案或解决这个问题。

所以这里是一个例子：

我创建了一个 div，在这个 div 中我们有一个链接（它是一个按钮）。

当我将鼠标悬停在 div 上时，这个 div 会改变 bg-color 但链接不是因为我在 div 上方... 所以当我在 div 上方时，这个 div 和链接也会改变颜色或背景这是我需要的...但是怎么做呢？我从来没有用过这个，但现在我想我的下一个工作需要这个:))

非常感谢！

【问题讨论】：

标签： html css hyperlink styles

【解决方案1】：

使用 css 很容易实现：(working jsFiddle)

HTML：

<div class="container">
    <a class="button">some text</a>
</div>

CSS：

.container:hover{
    background-color:red;
}
.container:hover .button{ // selector for .button which is in a hovered .container
    background-color:blue;
}

【讨论】：

啊 :D 太棒了 ^^ 非常感谢！

【解决方案2】：

您要问的是以下 CSS 选择器：

div:hover a{
    /* your styles here */
}

Demo here

【讨论】：

【解决方案3】：

希望这个demo link 对你有用。

*{
    padding:0;
    margin:0;
    }
body {
    font:normal 12px/18px Arial, Helvetica, sans-serif;
    color:#000;
    padding:20px;
    background-color:#F2F2F2;
    }
ul, li, ol {
    list-style-type:none;
    }

.wrapper {
    width:95%;
    padding:10px;
    overflow:hidden;
    height:100%;
    margin:0 auto;
    border:1px  solid green;
}
.spacer {
    clear:both;
    font-size:0;
    line-height:0;
    height:0;
    }
.wrapper:hover {
    background-color:#999999;
    cursor:pointer;
    }
.btmoOne {
    width:170px;
    margin:0 auto;
    height:20px;
    background-color:#FF0000;
    padding:10px;
    }
.wrapper:hover .btmoOne {
    background-color:#006600;
    }

【讨论】：

为什么不赞成这个答案，尽管它符合 OP 的要求

【解决方案4】：

试试这个：

<div id="test">
  <a href="#">A link</a>
</div>

CSS：

div#test:hover {
   background-color: red;
}
div#test:hover a {
   background-color: red;
}

【讨论】：