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>');
});

当我将鼠标悬停在名称上时，它会更改为退出图标，但是......

我鼠标移出时不会改回用户名，
用于注销图标的花式引导工具提示无法正确显示。我改为使用标准的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');

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

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

jQuery .mouseleave不工作

1 个答案: