Question

以下是我的HTML代码。

        <div class="container">
            <a class="link1" href="">Link1</a>
            <a class="link2" href="">Link2</a>
            <a class="link3" href="">Link3</a>              
        </div>

CSS中是否有任何选择器，当我将鼠标悬停在Link1或Link2上时，background-color的{{1}}会发生变化。因为我是新人和自我认为这就是我遇到问题的原因。

Answer 1

CSS4（yup）介绍了:has()伪类（http://dev.w3.org/csswg/selectors4/#relational）但是目前（截至2014年9月）引擎或浏览器目前不支持此功能。

如果支持，则（当前建议的）语法为：

div.container:has(a.link1:hover) { background-image("link1.png"); }
div.container:has(a.link2:hover) { background-image("link2.png"); }
div.container:has(a.link3:hover) { background-image("link3.png"); }

在此之前，您需要依赖Javascript，例如jQuery的类似has（http://api.jquery.com/has/）。

Answer 2

简答否。无法选择父母或按升序排列。

您可以做的最好的事情就是更改HTML并使用其他元素伪造父级的背景。

像这样：

HTML

 <div class="container">
        <a class="link1" href="">Link1</a>
        <a class="link2" href="">Link2</a>
        <a class="link3" href="">Link3</a> 
        <div class="fake"></div>
 </div>

CSS

.fake {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:yellow;
}
.link1, .link2, .link3 {
    position:relative;
    z-index:1;
}
.link1:hover ~ .fake {
    background:#CCC;
}
.link2:hover ~ .fake {
    background:brown;
}
.link3:hover ~ .fake {
    background:orange;
}

检查此演示 http://jsfiddle.net/g7brnb9q/

关于~选择器有助于选择兄弟元素，在这种情况下，链接后具有fake类的任何元素。

Chek这里有关于GO HERE

的更多信息

Answer 3

css上没有父选择器...

如果您可以使用javascript方法，则可以执行以下操作：

document.getElementsByClassName("link1")[0].onmouseover = function() {
    this.parentNode.backgroundColor = "red";
};
document.getElementsByClassName("link2")[0].onmouseover = function() {
    this.parentNode.backgroundColor = "green";
};
document.getElementsByClassName("link3")[0].onmouseover = function() {
    this.parentNode.backgroundColor = "blue";
};

在悬停时更改父元素的背景颜色

3 个答案: