仅使用CSS在Div B上悬停时更改Div A的背景图像

Question

  

这就是我所拥有的

带有背景图像的主区内主页上的四个按钮。

  

我想要实现的目标

在悬停每个按钮时，我想仅使用 CSS 更改背景图片。

我可以在某种程度上使用 HTML 标记。

下面是原型

我的HTML

<div id="mainImage"><img class="style1" width="100%" height="100%"  /></div>
<div id="DwellRestBtn"><a href="Dwell & Rest.html">Four</a></div>
<div id="DwellRestBtn"><a href="Dwell & Rest.html">Three</a></div>
<div id="DwellRestBtn"><a href="Dwell & Rest.html">Two</a></div>
<div id="DwellRestBtn"><a href="Dwell & Rest.html">One</a></div>

我的CSS

.style1
{
    width:500px;
    height:500px;
}

.style1
{
content:url('http://www.audenaerde.org/tiger.jpg');
}
a:hover .style1
{
content:url('http://www.butterflypictures.net/images/morpho-butterfly.jpg');
}

如果有css3的方法，它应与至少现代浏览器兼容。

Answer 1

1. 您有多个具有相同ID属性的元素，该属性应该是唯一的。我把它改成了类。
2. 据我所知，使用当前的CSS，如果图像跟随按钮（但不在其前面），你可以做你想要的，但是你仍然可以在按钮之前可视化（但不在DOM中） ）。然后，您可以使用General sibling selector。

jsFiddle Demo

.DwellRestBtn:hover ~ #mainImage .style1
{
    background: url('http://www.butterflypictures.net/images/morpho-butterfly.jpg');
}