javascript - 将鼠标悬停在图像上并在 javascript 图库中显示链接

Question

我使用一个 javascript 画廊来处理四到五个图像，我想要的是当鼠标悬停在图像上时出现一个链接，我看到其他人问过这个但对我没有用，有人可以链接一个 js fiddle 所以我能看懂吗？

我知道 jquery 就是这样的

jQ: 
   $(function(){
            $('.ih').hover(
              // Over
            function(){
                var $ih = $(this);
                $ih.find('.ih-info').stop(true,true).animate({opacity:0.8}, 400);
            },
            // Out
            function(){
                var $ih = $(this);
                $ih.find('.ih-info').stop(true,true).animate({opacity:0}, 400);
            }
        ).find('.ih-info').css('opacity',0);
    });

这是我的html；

 <ul style="list-style-type: none;">
                    <li>
                        <div 
                            <img src="images/fleet_vehciles/sf56omm_high_volume_jetvac.jpg"/>
                        </div>
                    </li>

                    <li>
                        <img src="images/fleet_vehciles/sc62lco_low_volume_jetvac_rioned.jpg"/></a>
                    </li>

                    <li>
                        <img src="images/fleet_vehciles/sa08ff0_support_van.jpg" /></a>
                    </li>

                    <li>
                        <img src="images/fleet_vehciles/mx58lxc_cctv_van.jpg" /></a>
                    </li>
                </ul>

请帮忙，因为我已经做了很多年了，我快疯了...感谢您的帮助!

Answer 1

您不需要 javascript 来完成此操作，您可以使用 hover 伪类通过 css 完成这一切。

我在这里包含了代码:

http://codepen.io/anon/pen/JGpeq

HTML:

<ul style="list-style-type: none;">
    <li>

        <img src="http://www.placehold.it/100x100"/>
        <a href="#">link</a>

    </li>

    <li>
        <img src="http://www.placehold.it/100x100"/>
        <a href="#">link</a>
    </li>

     <li>
         <img src="http://www.placehold.it/100x100" />
         <a href="#">link</a>
     </li>

     <li>
         <img src="http://www.placehold.it/100x100" />
          <a href="#">link</a>
     </li>
</ul>

还有 CSS:

ul li {
  position: relative;
}

ul li a {
  position: absolute;
  left:0; top:0;
}

a {
  opacity: 0;
  transition: opacity 1s;
}

ul li:hover a {
  opacity: 1;
}