如何使鼠標離開功能停止，當鼠標懸停特定的div

這是HTML代碼：如何使鼠標離開功能停止，當鼠標懸停特定的div

<div class="item">item 01</div> 
<div class="item">item 02</div> 
<div class="item">item 03</div> 
.... 

<div class="list"> 
    <ul> 
     <li>store 1</li> 
     <li>store 2</li> 
     <li>store 3</li> 
    </ul> 
</div>

現在它是如何工作的：

當我將鼠標懸停

到「項0X」「列表「應該按鈕旁邊的項目0X」這工作正常。

問題是如何使列表保持可見狀態，當我再次從列表返回到按鈕時。

我嘗試使用此代碼，但它不工作

$(document).on({ 
     mouseenter: function() { 
      var div = $(this); 
      if($('.list').css('display') == "none") 
      { 
       actionHover(div); 
      } 
     }, 
     mouseleave: function() { 
      setTimeout(function(){ 
       if($(".list").is(':hover')) 
       { 

       } 
      else if($(".item").is(':hover')) 
      { 

      } 
       else 
       { 
        $('.list').hide(); 
       } 
      }, 100) 
     } 
    },".list, .item");

當鼠標從列表中走出它使一個錯誤：

Error: Syntax error, unrecognized expression: unsupported pseudo: hover

http://jsfiddle.net/y2KcC/3/

來源

2014-01-09 user850690

您正在使用id「item」幾次。 ID必須是唯一的！另外，取決於你有什麼jQuery版本，：懸停是越野車。只是谷歌，第一擊：http://stackoverflow.com/questions/11998514/jquery-1-8-unsupported-pseudo-hover – Alex

如果你想要做的就是隱藏'.list'當用戶沒有徘徊在' .list'或'.item'，取出整個'setTimeout'部分，只留下'$（'.list'）。hide（）;' - 你的mouseleave已經被每個觸發。 – Goose

Goose：你的回答是正確的，但這會造成一個小問題，當我從按鈕粘貼到列表中時，列表隱藏得很快，所以我需要快速粘貼以便隱藏列表......任何想法？ – user850690

如果我對你想要做的事情正確理解，試試這樣：

$(document).on({ 
    mouseenter: function() { 
     $(this).children('.list').show(); 
    }, 
    mouseleave: function() { 
     $(this).children('.list').hide(); 
    } 
}, ".item");

這將要求您將該列表作爲.item的子元素，並且將父項.item的鼠標移出/移出將顯示/隱藏每個列表。

Here is a sample, with the markup also adjusted.

編輯

好吧，我清理你的代碼，刪除setTimeout功能。之後，它看起來你遇到的問題不是該列表消失，而是一旦你將其移動鼠標，它就試圖再次移動。我對它進行了調整，以便只在您將鼠標移動到.item元素上時才更改位置。如下圖所示：

if ($(this).hasClass('item')) { 
    $('.storeList').css({'left': (left + btn_wtd) , 'top': top }); 
}

這是updated fiddle。

來源

2014-01-09 18:43:09 Goose

感謝Goose，爲什麼我不使用列表作爲一個孩子，那是因爲「項目列表」的div父項有一個溢出：hidden;因此當您嘗試爲列表中的最後一項選擇商店時，無法正確顯示商店列表。並在這裏，當我得到「商店列表」，並通過這種方法列表顯示正確的「項目列表」框 – user850690

你可以創建一個jsfiddle有**所有你的標記和樣式？我認爲這會幫助我更好地理解。 – Goose

行，http://jsfiddle.net/y2KcC/3/ – user850690

如何使鼠標離開功能停止，當鼠標懸停特定的div

回答

相關問題