Ad

JS Issue With Mouseover Event To Show Extra Buttons

- 1 answer

I'm working on an interface which, when the user hovers over an LI element 2 buttons become visible to offer more functionality. Let's say "edit" and "remove".

I'm having issues with the mouse hit zones.

Mouseover works well when the mouse is actually on the LI element (the grey background) but does not work when the mouse is over text or the actual buttons which need to be clicked.

(For context, this is within a Chrome extension and no in-line JS is allowed. )

Summary demo here: https://jsfiddle.net/matthewzammit/uh9abfcr/16/

thanks!

Matt


-FULL CODE-

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" target="_blank" rel="nofollow noreferrer" href="#"></a>
      <a id="edit0" class="editButton" name="Edit" target="_blank" rel="nofollow noreferrer" 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" target="_blank" rel="nofollow noreferrer" href="#"></a>
        <a id="edit1" class="editButton" name="Edit" target="_blank" rel="nofollow noreferrer" 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 */
}
Ad

Answer

You can do this with just CSS like this:

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

You can delete the javascript event handlers.

Ad
source: stackoverflow.com
Ad