js案例，鼠标移动到图片，图片显示一张照片点击图片能来回切换

 

html：

<li id="divimg" class="picCon masonry-brick" style="width: 49.5%">

<div class="uiop">

<label id="lovejpg" class="number" style="display: none;">

<img

src="img/jpg/love.png"

class="imglove"

shareid="{{ rew.id }}"

onclick="imgloves(this)"

/>

</label>

<a href="javascript:void(0)" class="img">

<img id="kljh" src="img/jpg/2.png" />

</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>

 

效果图

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