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

Question

这就是我所拥有的

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

我想要达到的目标

在每个按钮悬停时，我只想使用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 同级选择器。

jsFiddle Demo

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