Question

大家好我正在建立一个菜单，我试图在每个菜单项上放置一个悬停效果但是...当我悬停一切都工作得很好，我得到我想要的HTML，菜单项有一个backgruond图像。

但是大多数时候，卸妆效果都会消失。我发现，如果我在ul菜单上激动地移动鼠标，它可以正常工作。但是，如果我的鼠标在li项目上进行垂直移动，则会点燃。我的代码是这样的：

 $("ul.menu li").hover(ChangeToHoverMenuItem, ChangeBackMenuItem);
 function ChangeToHoverMenuItem()
 {
    var currLi = $(this);
    lastLi = currLi;
    var currMenuItemText = currLi.find("a").text();
    currLi.html("");

    currLi.append("<div style='float:right;'><div class='right_item_hov'></div>" +
                "<a class='item_menu_hov'>" +
                currMenuItemText +
                "</a>" +
                "<div class='left_item_hov'></div></div>");
 }

 function ChangeBackMenuItem ()
 {
     var currLi = $(this);
     var currMenuItemText = currLi.find("a").text();

     currLi.html("");
     currLi.append("<a>" + currMenuItemText + "</a>");

 }

     <div class="menu_middle">
    <ul class="menu">
        <li>
            <a>
                main
            </a>
        </li>
        <li>
            <a>
                gallery
            </a>
        </li>
        <li>
            <a>
                event
            </a>
        </li>
        <li>                
            <a>
               about
            </a>
        </li>
        <li>
            <a>
                contact
            </a>
        </li>
    </ul>
</div>

谢谢

Answer 1

尝试为li赋予边界（使用css'border'属性），然后在'ChangeBackMenuItem'的开头添加一个console.log（firebug）语句，看看每次调用该函数未悬停。

Answer 2

奇怪的是，兄弟元素上有两个mouseenter()个事件，中间没有mouseleave()个事件。

一个想法是注册mouseenter()和mouseleave()事件，而不是使用hover()。 hover()也应该这样做，但是怎么知道。如果这样做，问题在于hover()的实现，但我不这么认为。


$("ul.menu li")
  .mouseenter(ChangeToHoverMenuItem)
  .mouseleave(ChangeBackMenuItem);

另一个想法是确保执行mouseleave()代码。在“doHover”处理程序中，您可以检查是否存在hoveredItem。如果是这样，您可以使用仍然悬停的项目ChangeBackMenuItem调用this函数。为了确保在离开ul时调用“unhover”处理程序，你需要一个mouseleave事件，它也是如此。此解决方案依赖于ul元素上的mouseleave工作。


$(function() {

 var hoveredItem = null;

 function ChangeToHoverMenuItem()
 {
    if (hoveredItem) {
       ChangeBackMenuItem.call(hoveredItem);
    }
    hoveredItem = this;

    var currLi = $(this);
    lastLi = currLi;
    var currMenuItemText = currLi.find("a").text();
    currLi.html("");

    currLi.append("" +
                "" +
                currMenuItemText +
                "" +
                "");
 }

 function ChangeBackMenuItem ()
 {
     var currLi = $(this);
     var currMenuItemText = currLi.find("a").text();

     currLi.html("");
     currLi.append("" + currMenuItemText + "");
     hoveredItem = null;

 }

 $("ul.menu li").hover(ChangeToHoverMenuItem, ChangeBackMenuItem);
 $("ul.menu").mouseleave(function() {
   if (hoveredItem) {
     ChangeBackMenuItem.call(hoveredItem);
     hoveredItem = null;
   }
 });
});

用jquery悬停事件问题

2 个答案: