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

How to bypass z-index on mouseover to trigger a function? – Html

I have the following conundrum.

I have an unordered list and each li consists of three elements.
The bottom element is a short video that plays once the user’s mouse is over it and resets/pauses once it has moved away.
Above it, I have a div that is black with 50% opacity (cardOverlay).
And on top of it I have another div with text. (cardOverlayText)

I am trying to get the effect where on mouseover, the opacity goes of cardOverlay goes to a higher percentage and go back to 50% if the mouse moves away.

The problem is that in order to get a bright white text in the cardOverlayText, I have to put it with higher z-index, but that also blocks the video from detecting onmouseover trigger.

In addition, I can’t figure out how to change the opacity of the cardOverlay on mouseover as well.

Here is the relevant part of the code:

<div id="SolutionCards">
                <ul class="Cards">
                    <li class="Card">
                        <div class="cardOverlayText"> Sea Freight
                        </div>
                        <div class="cardOverlay"></div>
                        <video onmouseover="this.play();" onmouseout="this.pause();this.currentTime=0;" width="200" height="300" muted loop id="seaCardVideo">
                            <source src="video assets/sea card video_Trim.mp4" type="video/mp4">
                        </video>
                    </li>
...

There are total of 5

  • elements.

    • Tags:

    2

    Answers


    1. 0

      Try

      .cardOverlayText{
    pointer-events: none;
}

      When you add this line, the div shouldn’t "catch" the cursor. You will be able to see the element, but you won’t be able to interact with it (for example, you won’t be able to select the text).

      Could you explain the problem with the cardOverlay opacity? I think the best option is to do this in CSS.

      Edit:
      Do you mean something like this?

      .cardOverlay{
    opacity:0.5;
}

.Card:hover .cardOverlay{
    opacity:0.8;
}
      Login or Signup to reply.
    2. 0

      Why not just use JavaScript to achieve this? You’re already running inline JS with video.play() and video.pause().

      This function will give this functionality to all of your video elements, so you don’t have to write inline JS.

      The eventlistener is attached to the .card-element itself, but you can just swap out

      document.querySelectorAll('.Card');
      with
      document.querySelectorAll('.cardOverlay');

      if you prefer (would suggest sticking with .card, though).

      // select all cards
let cards = document.querySelectorAll('.Card');

// loop through all cards and add eventlisteners to them
cards.forEach((element) => {
  element.addEventListener("mouseover", function() {
    console.log('is playing');
    let video = this.querySelector(':scope video');
    if (video.paused) {
      video.play();
    }
  });

  element.addEventListener("mouseout", function() {
    console.log('is paused');
    let video = this.querySelector(':scope video');
    if (!video.paused) {
      video.pause();
    }
  });
});
      video {
  width: 500px;
  height: 500px;
  background: red;
}
      <ul class="Cards">
  <li class="Card">
    <div class="cardOverlayText"> Sea Freight
    </div>
    <div class="cardOverlay"></div>
    <video width="200" height="300" muted loop id="seaCardVideo">
                        </video>
  </li>
</ul>
      Login or Signup to reply.
    Please signup or login to give your own answer.

    Back To Top
    Search