需要JS來保持懸停鏈接處於活動狀態

Question

我有一個下拉菜單，當我將鼠標懸停在它上面時，我需要幫助使其懸停鏈接保持活動狀態，以便它與下拉菜單融合在一起。

我已將代碼放在JSF上

http://jsfiddle.net/JmR87/2/

謝謝

Answer 1

您可以通過以下方法對其進行修復：

#nav-container li a:hover span {
    display: block;
    background-image: url(http://i.stack.imgur.com/sTqNy.gif);
    background-repeat: repeat-x;
}

對此：

#nav-container li:hover span {
    display: block;
    background-image: url(http://i.stack.imgur.com/sTqNy.gif);
    background-repeat: repeat-x;
    color: #000
}

參見： http : //jsfiddle.net/JmR87/5/

Answer 2

在懸停函數中將一個類添加到要懸停的元素上，然后在退出時將其刪除。 類應該具有相同的樣式，具有懸停樣式：

$(function () {
  $('.dropdown, .dropdown2, .dropdown3').each(function () {
    $(this).parent().eq(0).hover(function () {
      $('.dropdown, .dropdown2, .dropdown3:eq(0)', this).show();
      $(this).addClass("hoverstyle");
    }, function () {
      $('.dropdown, .dropdown2, .dropdown3:eq(0)', this).hide();
      $(this).removeClass("hoverstyle");
    });
  });
});

然后定義.hoverstyle 。