Question

我在图像上定位链接时遇到问题。我正在使用不透明度和悬停状态这个链接，我设法让它工作，但结果不是我所期望的。悬停不按我想要的方式工作。我相信有更好的方法可以做到这一点，希望有人能够帮助我。谢谢！

这是HTML代码：

<ul id="content-images">
<li><img class="show2" src="img/some_img.png" width="176" height="168"></li>
<li><img class="show2" src="img/some_img2.png" width="176" height="168"></li>
<li><img class="show2" src="img/some_img3.png" width="176" height="168"></li>
</ul>
<span class="show"><a href="#">Link1</a></span>
<span class="show"><a href="#">Link2</a></span>

和CSS代码：

.show {
    opacity:0.8;
    position:relative;
    top:10px;
    left:10px;
  }
 .show:hover {
    opacity:1.0;
  }
 .show2 {
    left: 1px;
    opacity: 0.8;
    position: relative;
    top: -39px;
  }
 .show2:hover {
    opacity:1.0
  }

Answer 1

如果您希望链接和图像“表现为一个”，则应使用javascript。下面，我写了一个例子，说明它如何以非常简单的方式对链接和图像起作用。现场演示可在JSFiddle上找到： JSFiddle

<强> HTML：

<ul id="content-images">
<li><img id="image1" class="show2" src="http://placehold.it/100x100" width="176" height="168"></li>
</ul>
<span id="link1" class="show"><a href="#">Link1</a></span>

JS（JQuery）：

$(document).ready(function(){
    //hover image
    $('#image1').hover(function(){
        $(this).fadeTo("slow",0.8);
        $("#link1").fadeTo("slow",0.8);
    });
    //reestablish previous display when mouse out
    $('#image1').mouseout(function(){
        $(this).fadeTo("slow",1);
        $("#link1").fadeTo("slow",1);
    });
    //hover link
    $('#link1').hover(function(){
        $(this).fadeTo("slow",0.8);
        $("#image1").fadeTo("slow",0.8);
    });
    //reestablish previous display when mouse out
    $('#link1').mouseout(function(){
        $(this).fadeTo("slow",1);
        $("#image1").fadeTo("slow",1);
    });
});

OBS：如果您不想要任何过渡动画，只需删除"slow"内的fadeTo参数，或者如果您希望它更快，则将其更改为"fast"

在图像上定位超链接

1 个答案: