I have four lines of text and I want to display a specific image on mouseenter
on the right side of each line.
The problem I'm having right now is that all four images are beeing displayed at the same time.
What am I doing wrong?
http://jsfiddle.net/m97qebjr/10
jQuery:
$(".thumb").hide();
$(".text" ).mouseenter(function() {
$(".thumb").show();
}).mouseleave(function() {
$(".thumb").hide();
});
$(".thumb")
matches all elements with class thumb. Try this instead:
$(".thumb").hide();
$(".text").mouseenter(function () {
$(this).siblings(".thumb").show();
}).mouseleave(function () {
$(this).siblings(".thumb").hide();
});
Updated fiddle: http://jsfiddle.net/m97qebjr/13/
You don't need jQuery at all: http://jsfiddle.net/m97qebjr/16/
.thumb {
display:none; /* added line */
float:right;
overflow:hidden;
width:100px;
height:100px;
}
.wrap:hover .thumb{ /* added rule */
display:block;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.