鼠标悬停事件显示额外按钮的 JS 问题

Question

我正在开发一个界面，当用户将鼠标悬停在 LI 元素上时，2 个按钮变得可见以提供更多功能。让我们说"编辑"和"删除"。

我的鼠标命中区有问题。

当鼠标实际位于 LI 元素(灰色背景(上时，鼠标悬停效果很好，但当鼠标悬停在文本或需要单击的实际按钮上时，鼠标悬停不起作用。

(对于上下文，这是在Chrome扩展程序中，不允许内联JS。

此处的摘要演示：https://jsfiddle.net/matthewzammit/uh9abfcr/16/

谢谢！

马 特

<小时 />

-完整代码-

.HTML

<div id="populateArrayList">
<ul id="myList">
<!--dynamically fill list-->
<li id="0" class="urlElement" name="urlElement">
<div class="urlDetails">
<div class="urlFavicon">
<img src="https://www.google.com/s2/favicons?domain=facebook.com">
</div>
<div name="url" class="urlAddress" id="0">website1.com</div>
</div>
<div class="actionButtons">
<a id="remove0" class="removeButton" name="Remove" href="#"></a>
<a id="edit0" class="editButton" name="Edit" href="#"></a>
</div>
</li>
<!-- item 2 -->
<li id="1" class="urlElement" name="urlElement">
<div class="urlDetails">
<div class="urlFavicon">
<img src="https://www.google.com/s2/favicons?domain=google.com">
</div>
<div name="url" class="urlAddress" id="1">website2.com</div>
</div>
<div class="actionButtons">
<a id="remove1" class="removeButton" name="Remove" href="#"></a>
<a id="edit1" class="editButton" name="Edit" href="#"></a>
</div>
</li>
</ul>
</div>

.JS

document.getElementById("myList").addEventListener("mouseover", e => {
e.target.querySelector('.actionButtons').classList.add("editVisibility");
console.log("Target: " + e.target);
})
document.getElementById("myList").addEventListener("mouseout", function (e) {
e.target.querySelector('.actionButtons').classList.remove("editVisibility");
})
document.getElementById("myList").addEventListener("click", function (e) {
if (e.target && e.target.getAttribute('name') == "Remove") {
let idToRemove = e.target.parentElement.parentElement.getAttribute('id');
alert("Remove");
}
if (e.target && e.target.getAttribute('name') == "Edit") {
let idToEdit = e.target.parentElement.parentElement.getAttribute('id');
alert("Edit");
}
});

.CSS

.urlElement {
list-style-type: none;
background: #ebebeb;
margin: 10px;
padding: 10px;
border-radius: 7px;
height: 15px;
}
.urlDetails {
/*   background-color: red; */
}
.urlFavicon {
float: left;
margin-right: 10px;
/*     background-color: green; */
}
.urlAddress {
float: left;
/*     background-color: blue; */
}
.actionButtons {
display: none;
}
/* temp icon */
.removeButton {
margin-left: 5px;
padding-right: 20px;
background-image: url("https://img.icons8.com/ios/15/000000/delete-sign.png");
background-repeat: no-repeat;
}
/* temp icon */
.editButton {
margin-left: 5px;
padding-right: 20px;
background-image: url("https://img.icons8.com/ios/15/000000/edit.png");
background-repeat: no-repeat;
/*    display: none;*/
}
.editVisibility {
display: unset;
/* Hide button */
}

Answer 1

你可以像这样用CSS来做到这一点：

.urlElement:hover .actionButtons {
display: block;
}

您可以删除 JavaScript 事件处理程序。