[英]Changing image when div is hovered
我整天都在寻找解决方案。 我试图做这样的事情:
sigma-topline2012.com/en-us/topline-2012/bc-5-12/overview.html#highlight
如您所见,当我们在右侧的说明上移动鼠标时,图像正在改变。 有人可以帮我这些吗? 谢谢!
使用jQuery 悬停
<img id="image" src="http://placekitten.com/g/130/130" />
<ul>
<li data-link="http://placekitten.com/g/150/150">Cat 1</li>
<li data-link="http://placekitten.com/g/151/151">Cat 2</li>
<li data-link="http://placekitten.com/g/152/152">Cat 3</li>
</ul>
$(document).ready(function(){
var img = $('#image');
$('li').hover(function(){
img.attr('src', $(this).data('link'));
});
});
只需添加一个CSS类来淡入/淡出
尝试这个:
<div id="definition1">Definition 1</div>
<div id="definition2">Definition 2</div>
<img id="imageWrapper" src="image1.png" />
Javacript:
$("#definition1").hover(function(){
$('#imageWrapper').attr("src", function(index, attr){
return attr.replace("image1.png", "image2.png");
});
}, function(){
$('#imageWrapper').attr("src", function(index, attr){
return attr.replace("image2.png", "image1.png");
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.