Question

我正在使用一个javascript库来拍摄四到五张图片，我想要的是一个链接出现在图像上方悬停时，我见过其他人问这个但是没有什么对我有用，有人可以链接js小提琴所以我可以理解吗？

我知道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;
}

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

1 个答案: