How to create an overlay that appears on hover with the HTML structure below?

Question

Right now, I'm creating an overlay div and a content div with the structure below, where the overlay div is above the content div and is absolutely positioned. I'm rendering the content of the overlay and content div with Django variables, and, in my actual code these are being created using a for loop, to render everything on the page.

When the user hovers over a specific content div, I want the corresponding overlay div to appear on top of it. So basically, if the user hovers over object 1, I only want the overlay for object 1 to show up, then once the mouse leaves the object, I want the overlay to disappear. Right now, this is being done through Javascript and onmouseover and onmouseout. However, as you can see with the fiddle below, the onmouseover is working but the onmouseout is not (I also tried onmouseleave but it also doesn't work). So, what am I doing wrong here? Also, if this doesn't work, can someone suggest any more methods where I can get the hover to work, without changing the HTML structure (I still want the overlay div first, and then the content div second, since when I changed the structure of the code, my styling completely messed up)?

I set up one basic element, and it pretty much is how my code looks except I'm using a for loop to render multiple elements, and there is actual content, not just text. But, the onmouseout doesn't work here as well.

function showstatus(object) {
    object.style.opacity = "1";
}

function normalize(object) {
    object.style.opacity="0";
}

#overlay {
    background: rgba(255, 255, 255, 0.75);
    position: absolute;
    opacity: 0;
    width: 100%;
}

<div>
  <div id="overlay" onmouseover="showstatus(this)" onmouseout="normalize(this)">
    <h2>Overlay</h2>
  </div>
  <div style="background: blue;">
    <h1>Actual content</h1>
  </div>
</div>

Here's a fiddle as well

its because opacity is rendered last. Therefor it overlays everything that breaks hover functions and links or buttons. Use RGBa as background color to make it only partwise transparent. you could also use :hover for CSS to do it. — tacoshy, Nov 22 '20 at 20:10
@tacoshy But with CSS, I have no way of specifying which specific overlay div to show though, since I have multiple overlay and content divs? Since, I have no way of matching the content and overlay that correspond with each other — orph-c, Nov 22 '20 at 20:16
Please checkout this post. It implements the same functionality with CSS hover: https://stackoverflow.com/questions/17393231/css-on-hover-show-and-hide-different-divs-at-the-same-time — wasserholz, Nov 22 '20 at 20:33

score 0 · Accepted Answer · answered Nov 22 '20 at 20:17

I'm not sure why but when i changed the name of the normalize function it started working. like this:

function showstatus(object) {
    object.style.opacity = "1";
}

function out (object){
 object.style.opacity="0";
}

#overlay {
    background: rgba(255, 255, 255, 0.75);
    position: absolute;
    opacity: 0;
    width: 100%;
}

<div>
  <div id="overlay" onmouseout="out(this)" onmouseover="showstatus(this)" >
    <h2>Overlay</h2>
  </div>
  <div style="background: blue;">
    <h1>Actual content</h1>
  </div>
</div>

probably it's because of this : https://www.w3schools.com/jsref/met_node_normalize.asp

How to create an overlay that appears on hover with the HTML structure below?

1 Answers1