Clever Geek Handbook

Hi, I have a container, contain the number of images in the box

I have a container that contains a number of images in a box. when you hover the mouse over the image, a window with the image will appear. but when i use this script all windows get open ...

$(".conbx img").mouseover(function() {
    $(".topics-active").show()
});

$(".conbx img").mouseout(function() {
    $(".topics-active").hide()
});

jsfiddle.net/xqfv3fhq

+3


source to share


3 answers


You should get the current items siblings

.

$(".conbx img").mouseover(function() {
    $(this).siblings(".topics-active").show()
});

Demo: https://jsfiddle.net/tusharj/xqfv3fhq/1/

Optimization



$(".conbx").on('mouseover', 'img', function() {
    $(this).siblings(".topics-active").show()
}).on('mouseout', 'img', function() {
    $(".topics-active").hide()
});

Alternatively, you can also use hover

:

$(".conbx img").hover(function() {
    $(this).siblings(".topics-active").show()
}, function() {
    $(".topics-active").hide()
});
0


source


Use this



$(".conbx img").mouseover(function() {
    $(this).next('.topics-active').show()
});

$(".conbx img").mouseout(function() {
    $(this).next('.topics-active').hide()
});
0


source


use this

$(".conbx img").mouseover(function(){
     $(this).closest('.fltlft').find(".topics-active").show();
});
$(".conbx img").mouseout(function(){
     $(this).closest('.fltlft').find(".topics-active").hide();
});

DEMO HERE

or you can just use CSS only without needing jquery at all

.fltlft:hover .topics-active{
    display: block;
}

DEMO HERE

0


source






More articles:


All Articles