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/