在简单的菜单上工作,用户可以在其中添加新元素。问题是,当点击最后一个 div(“新元素”)时,新元素被创建并将最后一个元素向右移动,触发悬停(最后一个元素闪烁)
// find elements
var button = $("button")
var container = $('.container');
var newBtn = $('.new');
newBtn.on('click', function() {
$('<div class="row">blinking new</div>').insertBefore(newBtn)
})
body {
margin: 0;
padding: 0;
}
.container {
display: flex;
background: gray;
height: 30px;
}
.row {
background: green;;
width: 100px;
}
.row:hover {
background: yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="row">firstg </div>
<div class="row">second </div>
<div class="new row">new item</div>
</div>
Chrome:当悬停目标发生变化时,最新元素的背景会闪烁。
IE11:添加新item时,IE不重绘菜单,保留最新的item悬停状态,即使光标停留在新添加的item上。
是否存在解决此问题的解决方法?
最佳答案
您可以将按钮更改为新元素,然后创建一个新按钮,而不是创建一个新元素并将其插入到按钮之前。这样,悬停状态就会停留在当前元素上,而不必切换:
// find elements
var button = $("button")
var container = $('.container');
var newBtn = $('.new');
function handleClick() {
var newDiv = newBtn.clone();
newDiv.insertAfter(newBtn);
newBtn.html('blinking new');
newBtn.off('click')
newBtn = newDiv;
newBtn.on('click', handleClick);
}
newBtn.on('click', handleClick)
body {
margin: 0;
padding: 0;
}
.container {
display: flex;
background: gray;
height: 30px;
}
.row {
background: green;;
width: 100px;
}
.row:hover {
background: yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="row">firstg </div>
<div class="row">second </div>
<div class="new row">new item</div>
</div>
关于javascript - 将新元素添加到菜单时,背景会在悬停时闪烁,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49681069/