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

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

我对鼠标命中区域有问题

当鼠标实际位于LI元素（灰色背景）上时，Mouseover工作正常，但当鼠标位于需要单击的文本或实际按钮上时，Mouseover不工作

（对于上下文，这在Chrome扩展中，不允许使用内嵌JS。）

此处的摘要演示：

谢谢

马特

---

-完整代码-

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>

CSS

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

.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 */
}

---

您可以使用如下CSS来完成此操作：

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

---

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

OMG！我以为我试过了，但显然没有。谢谢