jQuery .mouseleave 不工作

Question

我正在尝试用悬停时的注销按钮替换用户名。当页面加载时，我将其作为导航之一。元素...

<li id="logout_name">
    <span class="nav_icon_sizing hidden-xs no_focus" style="position: relative; top: 10px; left: 8px; color: white;"><?php echo ucfirst($user->data()->fname); ?></span>
</li>

我正在尝试让文本切换为带有此功能的注销图标...

$('#logout_name').mouseover(function(){
    $('#logout_name').replaceWith('<li id="logout_name"><a href="<?=$us_url_root?>users/logout.php" class="nav_icon_sizing hidden-xs no_focus" style="padding-top: 15px; padding-bottom: 10px;" data-tooltip="tooltip" title="Logout" data-placement="bottom"><i class="fa fa-fw fa-sign-out"></i></a><li>')
});
$('#logout_name').mouseleave(function(){
    $('#logout_name').replaceWith('<span class="nav_icon_sizing hidden-xs no_focus" style="position: relative; top: 10px; left: 8px; color: white;"><?php echo ucfirst($user->data()->fname); ?></span>');
});

当我将鼠标悬停在名称上时，它确实会变为注销图标，但是...

1. 鼠标移开时不会变回用户名，并且
2. 精美的引导工具提示无法正确显示注销图标。我得到的是标准的 HTML 工具提示。

我觉得如果$(document).ready() 可以重新称为mouseover/mouseleave 一切都会好起来的，但我不认为这是真的。

有什么想法吗？

Answer 1

不久之后，您只需使用 CSS 和 :hover 伪即可实现所需的一切。
现在到 JS

---

使用mouseover 而不是mouseenter。

mouseover 只要（组成这个词）鼠标在你的元素上触发。

你可以：

$('#logout_name').on({
  mouseenter: function () { /*enters code here */ },
  mouseleave: function () { /*leaves code here */ }
});

此外，您将<li> 替换为<span> 的方式会让人怀疑您在其中做错了什么。 <ul> 仅接受 <li> 元素，不接受 SPAN。

这里的重要问题是你用一个新元素替换一个 DOM 元素，因此新创建的元素将不再响应你的事件 - 因为它绑定到现在删除的一个

将.on 与动态事件委托一起使用可能（没有）帮助：

$(document /*or some static parent selector */ ).on({
  mouseenter: function () { /*enters code here */ },
  mouseleave: function () { /*leaves code here */ }
}, '#logout_name');

防止由于重新创建相同元素并重新附加新事件而进入无限循环的更好示例是仅使用 .html() 修改其内容，但保留原始 <li> 包装器：

$('#logout_name').on({
    mouseenter: function () { 
        $(this).html('<a>ENTER</a>');
    },
    mouseleave: function () { 
        $(this).html('<a>LEAVE</a>');
    }
});

<ul id="settings">
  <li id="logout_name">
    <a>LEAVE</a>
  </li>
</ul>

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

http://api.jquery.com/on/

P.S：不要使用内联样式。使用您的样式表。