추가 버튼을 표시하는 마우스 오버 이벤트와 관련된 JS 문제

사용자가 LI 요소 2 버튼 위로 마우스를 가져 가면 더 많은 기능을 제공 할 수있는 인터페이스를 작업 중입니다. "편집"및 "제거"라고합시다.

마우스 히트 영역에 문제가 있습니다.

Mouseover는 마우스가 실제로 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 */
}