Question

我想要影响同一图像的多个链接的CSS悬停效果。如果您查看此示例站点，我有修复，销售，升级和数据恢复链接。当你将鼠标悬停在其中任何一个上面时，我希望左边的图像能够改变。你可以将鼠标悬停在当前的图像上，看看我的意思。

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

Answer 1

我会创建一个包含图像和所有链接的框。然后当盒子悬停在图像上时会发生变化。这并没有让你得到你想要的东西 - 只是在链接上方盘旋会改变图像，但我认为它足够接近并且更容易。

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

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

Answer 2

将图片放在a标记内。然后使用position: relative定位图像...

例如

a img{
   position: relative;
   left: -50px;
}

Answer 3

将<p>和<h3>标记包裹在<a>标记内。

Answer 4

这似乎有效......部分是XD

<div class="frontdiv fblankd">
    <a href="/audio-video" id="hav" style="width: auto;">
        <div style="
            height: 80px;
            margin-left: 81px;
            background: white;
            color: black;
        ">
            <h3>AUDIO / VIDEO</h3>
            <p><a href="#music">Music Server</a>, <a href="#theatre">Home Theatre</a>, <a href="#zone">Zone Systems</a>, <a href="#remote">Universal Remote Control</a></p>
        </div>
    </a>
</div>

基本的想法是将你的内容放在一个标签中（就像以前一直在说的那样）。

我对样式所做的是将锚设置为width：auto并将内容包装在div中。这个div然后给了80px的高度，81px的左边距，白色的背景和黑色的字体颜色。

不同的链接CSS Hover更改图片

4 个答案: