css - 不同的Links CSS Hover改变一张图片

Question

我想要影响同一图像的多个链接的 CSS 悬停效果。如果您查看此示例站点，我有维修、销售、升级和数据恢复链接。当您将鼠标悬停在其中任何一个上时，我希望它们左侧的图像发生变化。您可以将鼠标悬停在当前存在的图像上以了解我的意思。

网站:http://ctuchicago.squarespace.com/

Answer 1

我会创建一个包含图像和所有链接的框。然后当框悬停在图像上时会发生变化。这并不能完全满足您的需求 - 仅将鼠标悬停在链接上会更改图像，但我认为它足够接近并且容易得多。

http://jsfiddle.net/mrtsherman/D5ZRs/

div:hover img { background: url('blah'); }

<div> 
  <img src="" />
  <a href="">Repair</a>
  <a href="">Sales</a>
</div>