带有鼠标悬停事件的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事件处理程序。