Question

我有这个jQuery代码：

<script type="text/javascript"> 
$(function() {
    $(".one-edition img").hover(function() {
        $(this).next(".editions-info-text").show();
    }, function() {
        $(this).next(".editions-info-text").hide();
    });
}); 
</script>

其中，如果div one-edition下的图像悬停在它上方，则会显示信息文本div，当它悬停时，它会消失 - 很容易。

但是，我正试图让它像Fancybox画廊一样工作：

<div class="grid_3 one-edition">
    <a href="images/latest/MO20.jpg" rel="editions-1"><img src="http://placehold.it/200x250"></a>
    <a href="images/latest/MO20.jpg" rel="editions-1"></a>
    <a href="images/latest/MO20.jpg" rel="editions-1"></a>
        <div class="editions-info-text">
            <p>Title of edition</p>
            <p>Further information</p>
        </div>  
    </div>

图库工作正常，但版本信息文本不再显示或隐藏。它必须与将img包装在锚标签中有关，但我一直试图把它弄乱一段时间，感觉你们可能能够提供帮助。

Answer 1

我认为问题来自$(this).next(".editions-info-text").show();。 $（this）应该是图像元素，但next()表示找到图像的兄弟，但.editions-info-text不在其兄弟姐妹中。您需要稍微重写选择器查询。

Answer 2

只需使用parent（）向上移动到您添加的<a>即可。然后像以前一样继续。

(function() {
     $(".one-edition a img").hover(function() {
         $(this).parent('a').next(".editions-info-text").show();
     },function(){
         $(this).parent('a').next(".editions-info-text").hide();
});

Answer 3

由于您更改了html的结构，next() jQuery API正在返回另一个元素。

.editions-info-text

不是图像的下一个元素，因此您需要以这种方式重建脚本：

$(function() {
    $(".one-edition img").hover(function() {    
     $(this).parent().parent().find('.editions-info-text').show();
   //$('.one-edition').find(".editions-info-text").show();
        },function(){
     $(this).parent().parent().find('.editions-info-text').hide();
   //$('.one-edition').find(".editions-info-text").hide();
    });
});

<强>更新经过@grace shao的正确观察后，上面编辑的代码将起作用

简单的jQuery show（）;隐藏（）;混乱

3 个答案: