我使用 mouseenter 和 mouseleave 使用下面的 js 来切换删除按钮:
$('body').on("mouseenter",".item", function(){
$(this).next().show();
}).on("mouseleave", ".item",function(){
$(this).next().hide();
});
这是我的 HTML
<div class="item"></div>
<span class="dlt">x</span>
我做了一个演示 http://jsfiddle.net/sm3dx99k/重现我的问题。当我将鼠标悬停在 x 按钮
上时,它会轻弹,我希望它能够像我希望的那样可点击。
最佳答案
试试这个,没有闪烁。我对你的 js 做了一些更改
$('body').on("mouseenter",'.parent', function () {
$(this).children('.dlt').show();
}).on("mouseleave",'.parent', function () {
$(this).children('.dlt').hide();
});
.item {
border-radius: 50% !important;
background:orange;
width:50px;
height:50px;
}
.dlt {
border-radius: 50%;
font-size: 18px;
background: #ddd;
border: 1px solid #888;
font-weight: bold;
cursor: pointer;
padding: 0px 5px;
position:absolute;
margin:-55px 30px;
display:none;
}
.parent{
display:inline-block;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<div class="parent">
<div class="item"></div>
<span class="dlt">x</span>
</div>
<div class="parent">
<div class="item"></div>
<span class="dlt">x</span>
</div>
关于javascript - 悬停以显示兄弟元素,但轻弹,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29442524/