我正在使用一个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>
请帮助,因为我已经多年了,我疯了......感谢您的帮助!
答案 0 :(得分:0)
您不需要使用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;
}