你好，我有一个容器，里面有很多盒子的图片

Hi, I have container, contain numbers of box images

本文关键字：盒子 有一个 你好      更新时间：2023-09-26

我有一个容器，包含一些盒子图像。当我将鼠标移到图像上时，图像隐藏框将出现在图像上。但是当我使用这个脚本时，所有的盒子都打开了…

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

jsfiddle.net/xqfv3fhq

您必须获得当前元素siblings。

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

演示:https://jsfiddle.net/tusharj/xqfv3fhq/1/

<

优化/strong> 

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

或者，您也可以使用hover:

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

使用

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

使用

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

演示

或者你可以直接使用CSS而不需要jquery 

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

演示

相关文章：