How to add mouseover event listner to show that Im hovering over a particular image?-CodePudding

so I have used a img tag inside a list tag and I want to use a mouse over event to show on which image Im hovering above

<div ><img src="" alt="" /></div>
<ul  id="thumbnail">
  <li>
    <a href="img1.jpg" target="imgBox"
      ><img src="img1.jpg" width="120px"
    /></a>
  </li>
  <li>
    <a href="img2.jpg" target="imgBox"
      ><img src="img2.jpg" width="120px"
    /></a>
  </li>
  <li>
    <a href="img3.jpg" target="imgBox"
      ><img src="img3.jpg" width="120px"
    /></a>
  </li>
  <li>
    <a href="img4.jpg" target="imgBox"
      ><img src="img4.jpg" width="120px"
    /></a>
  </li>
  <li>
    <a href="img5.jpg" target="imgBox"
      ><img src="img5.jpg" width="120px"
    /></a>
  </li>
</ul

CodePudding user response：

You could use onm ouseover html native event on your image element like this

<img onm ouseover="yourfunction(this)">

doc

CodePudding user response：

You can add "onmouseover ="function(parameter)" to your HTML img element. With this you can point to a JavaScript function that executes whenever you hover over that element.

This page explains how to do so

CodePudding user response：

In CSS there is a :hover selector. This would be good if you just wanted to change the appearance of the image when it is hovered over, but if you want to do something more complicated you will want to use JavaScript here. There are many event listeners in JavaScript that could do the trick-- other answers have mentioned mouseover. However, I wouldn't simply put an event listener on each element, as this is a bit inefficient, and if you want to detect more than just the mouse going over (say, scrolling or the mouse leaving), it can get complicated. Instead, you can actually take advantage of CSS's :hover selector in your JavaScript using element.matches(":hover"). Then you can put an event listener on the whole document which triggers a function that checks each image for this property and does something if it has it. Here is what I have made:

document.addEventListener("mousemove", showImage);
document.addEventListener("mouseleave", showImage);
document.addEventListener("scroll", showImage);
function showImage() {
  var items = document.getElementById("thumbnail").getElementsByTagName("li");
  Array.from(items).forEach(function (e) {
    if(e.getElementsByTagName("img")[0].matches(":hover")) {
      //put whatever you want in here
      e.style.backgroundColor = "yellow";
    }
    else {
      //likewise put whatever you want in here
      e.style.backgroundColor = "white";
    }
  });
}

<div ><img src="" alt="" /></div>
<ul  id="thumbnail">
  <li>
    <a href="img1.jpg" target="imgBox"
      ><img src="img1.jpg" width="120px"
    /></a>
  </li>
  <li>
    <a href="img2.jpg" target="imgBox"
      ><img src="img2.jpg" width="120px"
    /></a>
  </li>
  <li>
    <a href="img3.jpg" target="imgBox"
      ><img src="img3.jpg" width="120px"
    /></a>
  </li>
  <li>
    <a href="img4.jpg" target="imgBox"
      ><img src="img4.jpg" width="120px"
    /></a>
  </li>
  <li>
    <a href="img5.jpg" target="imgBox"
      ><img src="img5.jpg" width="120px"
    /></a>
  </li>
</ul>

CodePudding user response：

It's worth noting the mouseover event bubbles. If you choose to use this you can just set a single mouseover event listener on the parent element (the <ul>) rather than setting event listeners on every image.

You can do this as follows...

document.getElementById("thumbnail").addEventListener("mouseover", outputImage);

function outputImage(e) {
  e.target.style.borderColor = "// desired color";
}

If you are unfamiliar with event bubbling and capturing, please refer to this SO thread.

Edit: Now that you've mentioned your goal is to change the border color, consider the :hover CSS pseudo-class as others have mentioend.

CodePudding user response：

you need to add an EventListerne to your Images using JavaScript: (updated)

var images = document.querySelectorAll("#thumbnail>li> a> img");

images.forEach(e=>e.addEventListener("mouseover", function(e) {
  e.target.style.border="2px solid red";
}));
images.forEach(e=>e.addEventListener("mouseout", function(e) {
  e.target.style.border="";
}))

<div ><img src="" alt="" /></div>
<ul  id="thumbnail">
  <li>
    <a href="img1.jpg" target="imgBox"
      ><img src="img1.jpg" width="120px"
    /></a>
  </li>
  <li>
    <a href="img2.jpg" target="imgBox"
      ><img src="img2.jpg" width="120px"
    /></a>
  </li>
  <li>
    <a href="img3.jpg" target="imgBox"
      ><img src="img3.jpg" width="120px"
    /></a>
  </li>
  <li>
    <a href="img4.jpg" target="imgBox"
      ><img src="img4.jpg" width="120px"
    /></a>
  </li>
  <li>
    <a href="img5.jpg" target="imgBox"
      ><img src="img5.jpg" width="120px"
    /></a>
  </li>
</ul