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

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 会发生变化。由于我是新手并且 self 思考，这就是我遇到一些问题的原因。

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/ )。