html:

<li >
<div class="uiop">
<label >
<img
src="img/jpg/love.png"
class="imglove"
share
onclick="imgloves(this)"
/>
</label>
<a href="javascript:void(0)" class="img">
<img />
</a>
</div>
</li>
 
 
 
js:
<script>
$(function() {
$(".uiop").mouseover(function() {
$(".number").css("display", "block");
});

$(".number").click(function() {
var src = $(this)
.find("img")
.attr("src");
if (src == "img/jpg/love.png") {
$(this)
.find("img")
.attr("src", "img/jpg/lovewit.png");
} else if (src == "img/jpg/lovewit.png") {
$(this)
.find("img")
.attr("src", "img/jpg/love.png");
}
});

$(".uiop").mouseout(function() {
$(".number").css("display", "none");
});
});
</script>
 
效果图
js案例,鼠标移动到图片,图片显示一张照片点击图片能来回切换

红色的心心点击能相互切换

相关文章: