Question

当鼠标在div中时，如何让给定div内的所有链接改变颜色？

我有这个设置：

nav.main {
    border: 1px dashed black;
    width: auto;
    height: auto;
    overflow: hidden;
    list-style: none;
}

nav a {
    color: black;
    text-decoration: none;
}

div.button:hover, a:hover {
    position:relative;
    background:#000000;
    color: white;
}

这正是我想要它做的，但它只会在你将鼠标悬停在div上时改变链接颜色，而不是在鼠标位于div内时更改链接颜色。

我该如何解决这个问题？

Answer 1

将最后一个从div.button:hover, a:hover更改为div.button:hover a。这不需要至少有一个链接悬停，只需要div。

示例：http://jsfiddle.net/GBzbp/

Answer 2

div.button:hover, a:hover {
    position:relative;
    background:#000000;
    color: white;
}

to:

div.button:hover a {
    position:relative;
    background:#000000;
    color: white;
}

Answer 3

改变你的最后一种风格。删除逗号和第二个:hover，因此：

div.button:hover a

Answer 4

我需要确定您的HTML，但我认为您只需将第三个选择器更改为：

div.button:hover a {
    position:relative;
    background:#000000;
    color: white;
}

当鼠标在div中时，如何使div内的所有链接改变颜色？

4 个答案: