javascript - 嗨，我有容器，包含许多盒子图像

Question

我有容器，包含许多框图像。当我将鼠标悬停在图像上时，图像隐藏框将出现。但是当我使用这个脚本时，所有的盒子都会打开......

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

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

jsfiddle.net/xqfv3fhq

Answer 1

您必须获取当前元素 siblings。

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

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

优化

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

或者，您也可以使用悬停:

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