在a：hover上更改包含在锚点中的div的背景？

Question

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

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

Answer 1

您可以将其嵌套在#pianist:hover下，如下所示：

example

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

Answer 2

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

jsFiddle here

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