MouseEnter/MouseLeave显示绝对定位元素的问题
MouseEnter/MouseLeave显示绝对定位元素的问题
提问于 2012-12-18 01:31:02
http://screencast.com/t/2KncBbiroMz
上面的链接更准确地显示了我遇到的问题。但是，如果您缓慢地将鼠标悬停在LI元素上，那么当您将鼠标悬停在链接上时，出现的链接就会消失。
这是我的HTML：
<div class="stats">
<div class="container">
<div class="row">
<div class="span16">
<ul class="user-stats">
<li id="class-points">
<span class="stats-content-container">
<span class="class-name"><%= class_room_name %></span><br />
<span class="large-headline"><%= total_game_points %></span> <span class="smaller-desc">points</span>
</span>
<a class="edit-class-name" href="#edit-class-name-modal" data-toggle="modal">edit name</a>
</li>
</ul>
</div>
</div>
</div>
</div>JavaScript：
$(function(){
$('ul.user-stats li#class-points').mouseenter(function() {
$('a.edit-class-name', this).stop(true, true).show();
}).mouseleave(function() {
$('a.edit-class-name', this).stop(true, true).hide();
});
});我甚至尝试了一个纯CSS解决方案，我仍然有同样的问题。
回答 2
Stack Overflow用户
回答已采纳
发布于 2012-12-18 01:42:05
你的编辑链接是绝对定位的吗？如果是这样的话，在li和锚之间可能有1px的间隙。需要查看html才能确定。
Stack Overflow用户
发布于 2012-12-18 01:41:13
问题似乎是在stats-content-container和edit-class-name之间存在差距，所以鼠标在悬停在class-points上之前实际上在某些点上离开了edit-class-name。
也许你可以试着把鼠标左键放在父元素上(也许是<ul class="user-stats">？如果看不到包含整个部分的实际html/css，就很难说。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/13919032
复制相关文章
相似问题
腾讯云开发者
