当鼠标悬停时改变父元素的背景颜色

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上时，更改container的background-color。由于我是新手并且自学，所以遇到了一些问题。

- LeCdr

---

你是在鼠标悬停在某些链接上还是所有链接上改变背景？ - Tim

一些链接...例如...如果我悬停在Link1上，我希望“container”的背景颜色为#e5e5e5，当我悬停在Link2上时，背景颜色应更改为#1e1e1e，同样适用。 - LeCdr

你需要使用JavaScript来完成这个任务。CSS无法引用父元素。 - kinakuta

可能是重复的问题：当悬停在单个子div上时，将父div更改为不同的背景。 - CRABOLO

我是新手...我花了一整天的时间来使用jQuery实现这个效果...但每次都失败了...好吧...我会继续努力的...谢谢大家。 - LeCdr

Answer 1

CSS4（是的）引入了: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/ )。

- Dai

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类的元素。

在此处了解更多前往此处

- DaniP

---

顺便问一下，~ 的用途是什么？ - LeCdr

很高兴能帮助你，伙计。如果你需要关于代码的任何解释，请告诉我。@Gull 检查一下修改。 - DaniP

@Gull，~是一种通用的兄弟选择器...它会选中在同一节点级别上位于所选元素之后的元素...在这种情况下，.fake是.link1的兄弟元素，并且位于其后面。 - LcSalazar

@LcSalazar，还值得注意的是，它与 + 相同，但不那么严格。兄弟选择器 + 选择第一个后续兄弟元素。~ 选择所有后续兄弟元素。 - im_brian_d

@Gull 如果你的问题已经解决，请不要忘记将其标记为已完成。 - DaniP

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";
};

- LcSalazar