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> 

This works great。

我现在遇到的问题是，如果光标在图像中心位置移动到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元素的opacity和.remove()荷兰国际集团额外.title元素修复标题，是因为你只有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'); 

然后相应地调整代码。

---

解决方案

Here is a working solution。

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的只有一次，并显示/隐藏他们，当用户将鼠标悬停他们。
它实际上应该会提高整体性能。

Here's an example.

默认情况下，.title具有样式属性display: none。

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和mouseleave，而不是hover。悬停实际上是这两个事件相结合的速记功能。我倾向于使用前者，因为它通常更容易阅读，而且更可靠。

另请注意，在这两种解决方案中，我都使用了功能.each()。 通过将元素赋值给变量，JQuery将不必浪费更多的处理来在每次引用它们时查找节点;使其更有效率。

通过使元件作为在选择器的第二参数，像这样

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

我没有使用的功能像.children()或.next()。它也非常有效。

你提到你很难与position ing，have a look at this，它可能会澄清事情。

---

唉，这些长篇帖子很难看，呃？那么，我想我已经涵盖了所需的一切。

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

Answer 2

更改.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'); 
}); 

之所以是，正如你所指出，悬停在<div>导致悬停事件于外IMG不再火的中高音。然而mouseenter和mouseleave盘旋在alt <div>上并没有为<img>启用mouseleave。

Answer 3

您可以检查event.relatedTarget属性，看它是否是一个.title元素在你的mouseout功能：

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

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

还要注意我是如何链接的函数调用，所以你不要必须从this制作两个jQuery对象。

UPDATE

我注意到，如果你从一个图像将光标移动到另一个的.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/