Html Question posted in
Some basic documentation can be found here.

Html – How do I get onmouseenter and onmouseleave to report with respect to an image rather than to its containing div?

Consider an img contained in a div. (See example below.) I’d like onmouseenter and onmouseleave to trigger when the pointer enters and leaves an image, but instead they trigger when the pointer enters and leaves… the image’s container?!? How do I fix this?

Things that work but are unsuitable for my purposes:

  • removing width: 100%; from the container’s styling
  • changing object-fit: contain; in the image’s styling
function mouse_entered() {
  console.log("mouse entered!")
}

function mouse_left() {
  console.log("mouse left!")
}
.image-container {
  width: 100%;
  height: 100vh;
}

.image {
  width: inherit;
  height: inherit;
  object-fit: contain;
}
<div class="image-container">
  <img src="https://lh3.googleusercontent.com/-s05ILbxi6YA/AAAAAAAAAAI/AAAAAAAAACc/yAd6W8jNSBI/photo.jpg?sz=256"
     class="image"
     onmouseenter="mouse_entered()"
     onmouseleave="mouse_left()"
>
</div>
Tags:

2

Answers


  1. 0

    This issue is occurring because of the CSS. The img tag is stretched to fit the container because it inherits the properties. The JavaScript events are used correctly. However, it seems like it occurs on the containing div because the image expands the container’s area. If you use Chrome dev tools and hover over the elements it will make more sense. Here is the code I have updated. Please let me know if this works for you.

    function mouse_entered() {
  console.log("mouse entered!")
}

function mouse_left() {
  console.log("mouse left!")
}
    .image-container {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.image {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
    <div class="image-container">
  <img src="https://lh3.googleusercontent.com/-s05ILbxi6YA/AAAAAAAAAAI/AAAAAAAAACc/yAd6W8jNSBI/photo.jpg?sz=256"
     class="image"
     onmouseenter="mouse_entered()"
     onmouseleave="mouse_left()"
>
</div>
    Login or Signup to reply.
  2. 0

    if you add a background-color to your <img> element, you will see that it also uses 100%.

    also, consider using pointer events…

    There is many ways to resolve this, like this one:

    const myImage = document.querySelector('.image-container > img')
  ;
myImage.addEventListener('pointerenter', (e) =>
  {
  console.clear('');
  console.log('pointer entered!');
  });
myImage.addEventListener('pointerleave', (e) =>
  {
  console.clear('');
  console.log('pointer left!');
  });
    .image-container {
  height     : 100vh;
  width      : fit-content; /* set the block width according       */
  margin     : 0 auto;      /* a way to center horizontally        */
  background : blue;        /* use a bg to test contener situation */
  }
.image-container > img {    /* a class name is not necessary */
  height     : 100%;
  background : orange;      /* use a bg to test image situation */
  }
    <div class="image-container">
  <img 
    src="https://lh3.googleusercontent.com/-s05ILbxi6YA/AAAAAAAAAAI/AAAAAAAAACc/yAd6W8jNSBI/photo.jpg?sz=256"
   >
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search