jQuery 悬停 Alt 标签问题

Question

我最近问了一个问题，当您将鼠标悬停在图像上时，图像的 alt 标签会显示在图像的中心，幸运的是，我提供了以下代码来执行此操作。

<script type="text/javascript">
    $(document).ready(function () { 
        $('#illustration-content ul li img').hover(
            function(){
                $(this).css('opacity','.2');
                var a = $(this).attr('alt');
                $(this).parent().append('<div class="title">' + a + '</div>');
            },
            function(){
                $(this).css('opacity','1');
                $(this).next().remove('.title');
            }
        );
    });
</script>

这很好用。

我现在遇到的问题是，如果光标在图像中心时移动到 alt 标签上，则会导致整个效果消失。我只希望当光标离开图像时效果消失。

这是我正在使用的 css，html 是直接的 UL 图像列表。

#illustration-content ul li img{
    position: relative;
}

.title{
    position: absolute;
    z-index: 1000;
    width: 100px;
    margin: 80px 0px 0px -150px;
    color: #fff;
    font-size: 18px;
    display: inline-block;
}

我尝试过使用和不使用内联块，结果相同，但标签的位置需要不同。

任何想法为什么会发生这种情况？

以下是问题的示例： http://jsfiddle.net/ysSJu/

感谢您的支持。

Answer 1

说明

当您将鼠标悬停在标题上时效果消失的原因是因为您只有 img 元素的事件。
相反，您应该将事件“链接”到整个 li，这样当用户将鼠标悬停在列表项上时，整个元素（包括 div.title）都会受到影响。

在上图中，您可以看到它是如何工作的。

目前，您的事件已链接到对应于绿色 img 的事件。
这意味着 div.title（黄色）将被视为“外部”元素（因为 div.title 不在 img 元素），因此当您将鼠标悬停在 div.title 上时，mouseleave 事件将会触发。
如果将事件链接到红色li，则该事件将包含红色边框内的所有内容，红色边框为绿色和黄色。

您还必须将 li 块视为 display: inline-block ，以便可以相对于图像定位标题。

所以，基本上，我想说的是，而不是

$('#illustration-content ul li img'); 

你应该做的

$('#illustration-content ul li'); 

然后相应地调整代码。

---

解决方案

这是一个可行的解决方案。

var $lis = $('#illustration-content ul li');

$lis.each(function(index, el){
    var $this = $(el);
    var eImg = $("img", $this);

    $this.mouseenter(function(){
        var eTitle = $('<div class="title">' + eImg .attr('alt') + '</div>');
        eImg.css('opacity','.1');
        $this.prepend(eTitle);
    }).mouseleave(function(){
        var eTitle = $("div.title", $this);
        eImg.css('opacity','1');
        eTitle.remove('.title');
    });
});

---

替代解决方案

与其在每次 mouseenter/mouseleave 处创建和销毁 div，最好在 document.ready() 处生成一次 div，然后显示/隐藏当用户将鼠标悬停在它们上方时它们。
它实际上应该提高整体性能。

这是一个示例。

默认情况下，.title 具有 style 属性显示：无。

var $lis = $('#illustration-content ul li');

$lis.each(function(index, el){
    var $this = $(el);
    var eImg = $("img", $this);
    var eTitle = $('<div class="title">' + eImg.attr('alt') + '</div>');

    $this.prepend(eTitle)
        .mouseenter(function(){
            eImg.css('opacity','.1');
            eTitle.show();
        })
        .mouseleave(function(){
            eImg.css('opacity','1');
            eTitle.hide();
        });
});

---

请注意，

我使用了 mouseenter 和 < a href="http://api.jquery.com/mouseleave/" rel="nofollow noreferrer">mouseleave 而不是 悬停。悬停实际上是这两个事件组合的简写函数。我倾向于使用前者，因为它通常更容易阅读，而且更可靠。

另请注意，在这两种解决方案中，我都使用了函数 .each()。
通过将元素分配给变量，JQuery 不必在每次引用节点时浪费更多处理来查找节点；使其更加高效。

通过将元素作为选择器中的第二个参数传递，像这样

$(".title", parent_element).css(...);

我不必使用 .children() 或 .next() 。它也非常高效。

您提到您在定位方面遇到了困难，看看这个，它可能会澄清一些事情。

---

唷，这些长帖子很难读，是吗？嗯，我想我已经涵盖了所需的一切。

祝你好运&快乐编码！ :)

Answer 2

您可以检查 event.latedTarget 属性，看看它是否是 mouseout 函数中的 .title 元素：

            function(event){
                if (!$(event.relatedTarget).hasClass('title')) {
                    $(this).css('opacity','1').siblings().remove();
                }
            }

演示：http://jsfiddle.net/ysSJu/1/

另请注意我如何链接函数调用，这样您就不必制作两个 jQuery 对象这个。

更新

我注意到，如果您将光标从一个图像移动到另一个图像，.title 元素将不会像它应该从前一个图像中删除一样。您可以通过重置 img 元素的 opacity 和 .remove() 额外的 .title 元素来解决此问题：

var $images = $('#illustration-content ul li img');
$images.hover(
    function(){
        $images.css('opacity', 1).siblings().remove('.title');
        var $this = $(this),
            a     = $this.attr('alt');
        $this.css('opacity','.2').parent().append('<span class="title">' + a + '</span>');
    },
    function(event){
        if (!$(event.relatedTarget).hasClass('title')) {
            $(this).css('opacity','1').siblings().remove('.title');
        }
    }
);

这是一个演示： http://jsfiddle.net/ysSJu/3/

Answer 3

更改.hover。到 .mouseenter 和 .mouseleave。

所以基本上...

var images = $('#illustration-content ul li img');
images.mouseenter(function(){
    $(this).css('opacity','.2');
    var a = $(this).attr('alt');
    $(this).parent().append('<div class="title">' + a + '</div>');
});
images.mouseleave(function(){
    $(this).css('opacity','1');
    $(this).next().remove('.title');
 });

原因是，正如您所指出的，将鼠标悬停在 alt

上会导致悬停事件不再在外部 img 上触发。但是，将 mouseenter 和 mouseleave 悬停在 alt

上时，不会触发 mouseleave 的 <代码>。