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
afzal
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
Tushar
source
to share
Use this
$(".conbx img").mouseover(function() {
$(this).next('.topics-active').show()
});
$(".conbx img").mouseout(function() {
$(this).next('.topics-active').hide()
});
0
Dipesh rana
source
to share
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
Mohamed-yousef
source
to share