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

Posted 2023-03-06

【中文标题】鼠标悬停事件的JS问题以显示额外的按钮

【英文标题】：JS issue with mouseover event to show extra buttons

【发布时间】：2020-05-01 00:53:10

【问题描述】：

我正在开发一个界面，当用户将鼠标悬停在 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 */

【参考方案1】：

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

.urlElement:hover .actionButtons 
    display: block;

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

【讨论】：

天啊！我以为我已经尝试过了，但显然没有。谢谢！