确保投资组合图像上的文本仅出现在指定的 li 中，而不是同时出现在所有 li 中

Question

我一直在想，当我浏览li的公文包图片时，如何使用jquery确保文本只出现在一个框中，而不是同时出现在每个框中。

这是我迄今为止的代码：

<ul class="box">
<li class="titulo"><p>Graphic Design</p></li>
<li><a class="zoom" rel="graphic" href="#"><div class="subname">example</div><img class="hover" src="#"></a></li>
<li><a class="zoom" rel="graphic" href="#"> <div class="subname">example</div><img class="hover" src="#"></a></li>
<li><a class="zoom" rel="graphic" href="#"><div class="subname">example</div> <img class="hover" src="#"></a></li>
<script type="text/javascript">
$(document).ready(function() {
$('.subname').hide();
$('.box li').mouseover(function() {
$('.subname').show();
}); 
$('.box li').mouseout(function() {
$('.subname').hide();
});
}); 
</script>

非常感谢你的帮助！

Answer 1

我相信您正在寻找"this"选择器。"this"选择器允许您引用触发事件的确切元素。试试这个：

<script type="text/javascript">
$(document).ready(function() {
    $('.subname').hide();
    $('.box li').mouseover(function() {
        $('.subname', this).show();
    }); 
    $('.box li').mouseout(function() {
        $('.subname', this).hide();
    });
}); 
</script>

代码的较短版本：

$('.box li').hover(function() {
    $('.subname', this).show();
}, function() {
    $('.subname', this).hide();
});

希望能有所帮助！