css - 更改包裹在锚点上的div的背景：悬停？

Question

我想更改 div.button on 的背景图片#pianist a:hover。这可能与 CSS 吗？

<a id="pianist">
    <div class="button"></div>
    <h2>PIANIST</h2>
</a>

Answer 1

您可以通过将其嵌套在下面来定位它#pianist:hover：

例子

#pianist:hover .button {
    background-color: red; /* replace with desired background declaration */
}

Answer 2

这是可能的..只需使用：#pianist:hover .button

jsFiddle在这里

.button {
    width:100px;
    height:100px;
    background: url('http://placehold.it/100x100');
}
#pianist:hover .button {
    background: url('http://placekitten.com/100/100');
}