Making divs dissappear onmouseout or when not hovering in CSS or JavaScript

Question

I've gotten the divs to appear where they should, but all CSS I could find/figure out needs them to be directly next to one another on the page. They aren't, so I tried js. It makes them load, but it doesn't make them disappear when the mouse isn't over the triggering element so that others can appear in the same spot. Here's what I have so far...

        function showDiv(divId) {
            // Hide all content divs for cells 10-17
            const divs = document.querySelectorAll('#cell10, #cell11, #cell12, #cell13, #cell14, #cell15, #cell16, #cell17');
            divs.forEach(div => {
                div.style.display = 'none'; // Hide all cells 10-17
            });

            // Show the selected div
            const selectedDiv = document.getElementById(divId);
            if (selectedDiv) {
                selectedDiv.style.display = 'block'; // Show the selected cell
            }
        }
        function hideDiv(divId) {
            // Hide all content divs for cells 10-17
            const divs = document.querySelectorAll('#cell24, #cell26, #cell28, #cell30, #cell33, #cell35, #cell37, #cell39');
            divs.forEach(div => {
                div.style.display = 'block'; // Hide all cells 10-17
            });

            // Show the selected div
            const selectedDiv = document.getElementById(divId);
            if (selectedDiv) {
                selectedDiv.style.display = 'none'; // Show the selected cell
            }
        }

#cell23 {
    top: 68%;
    left: 8%;
    display: block;
    height: 40%;
    width: 40%;
    background: tansparent;
    font-size: 12pt;
    font-weight: bold;
    color: var;
    font: verdana;
    font-size: 16pt;
    border-radius: 0;
    box-shadow: 0;
    border: 0;
    text-shadow: 2px 2px 4px #ffffff;
    z-index: 8;
}   
       
#cell24 {
    display: none;
    top: 58%;
    left: 67%;
    background: #00000013;
    color: #ffffff;
    text-align: center;
    padding: 0;
    border: 1px dashed #000000;
    height: 40%;
    width: 24%;
    overflow: auto;
    overflow-y: scroll;
    border-radius: 50%;
    box-shadow: 0 0 16px rgba(255, 255, 255, 0.8);
    z-index: 3;
    text-shadow: 2px 2px 4px #000000;
}
         
#cell25 {
    top: 72%;
    left: 8%;
    display: block;
    height: 40%;
    width: 40%;
    background: tansparent;
    font-size: 12pt;
    font-weight: bold;
    color: var;
    font: verdana;
    font-size: 16pt;
    border-radius: 0;
    box-shadow: 0;
    border: 0;
    text-shadow: 2px 2px 4px #ffffff;
    z-index: 8;
} 

#cell26 { 
    display: none;
    top: 58%;
    left: 67%;
    background: #00000013;
    color: #ffffff;
    text-align: center;
    padding: 0;
    border: 1px dashed #000000;
    height: 40%;
    width: 24%;
    overflow: auto;
    overflow-y: scroll;
    border-radius: 50%;
    box-shadow: 0 0 16px rgba(255, 255, 255, 0.8);
    z-index: 3;
    text-shadow: 2px 2px 4px #000000;
}

<div id="cell24" class="cell">
<br><br><br><br>Content #1<br><br><br><br></div>
<div id="cell26" class="cell">
<br><br><br><br>Content #2<br><br><br><br></div>
<div id="cell23" class="cell" onmouseover="showDiv('cell24')" onmouseout="hideDiv('cell24')">
         <p2>Load Content #!</p2>
         </div>
<div id="cell25" class="cell" onmouseover="showDiv('cell26')" onmouseout="hideDiv('cell26')">
<p2>Load Content #2</p2>
</div>

Any suggestions on how to get them to dissappear onmouseout? Thank you in advance for your time!!

Your HTML seems to include the script function showDiv(), can you include that in your question? — NullVoid
– NullVoid, Commented Jan 12 at 9:27
I'd suggest you first tidy up the HTML which has an obsolete tag (font) and some other errors. Putting code through a validator e.g. validator.w3.org can be helpful. — A Haworth
– A Haworth, Commented Jan 12 at 9:31
Why is your hideDiv function setting all other cells to display: block? — C3roe
– C3roe, Commented Jan 14 at 8:50
you hide element and everything gets rendered again, but the controll element is at the bottom and gets rerendered. You display one cell, it is not under the mouse, it fires something, it fires something back.... fix this and you might get useful responses :) ... and remove the not used information..... and z-index.... no way I am reading this again without a bounty :) — Gergo
– Gergo, Commented Jan 15 at 13:34

leomofthings · Accepted Answer · 2025-02-06 10:28:00Z

in your hideDiv function you are setting the div to display 'block' which is making them visible before hiding them.

I tried giving the divs a common class name, then setting the display appropriately.

// Hide all content divs.
function showDiv(divId) {
  const DivsWithcontent = document.querySelectorAll('.content');
  DivsWithcontent.forEach(div => {
    div.style.display = 'none';
  });

  // show the selected div.
  const selectedDiv = document.getElementById(divId);
  if (selectedDiv) {
    selectedDiv.style.display = 'block';
  }
}

// hide the specified content div.
function hideDiv(divId) {
  const selectedDiv = document.getElementById(divId);
  if (selectedDiv) {
    selectedDiv.style.display = 'none';
  }
}

#cell23 {
    top: 68%;
    left: 8%;
    display: block;
    height: 40%;
    width: 40%;
    background: transparent;
    font-size: 12pt;
    font-weight: bold;
    color: black;
    font: verdana;
    font-size: 16pt;
    border-radius: 0;
    box-shadow: 0;
    border: 0;
    text-shadow: 2px 2px 4px #ffffff;
    z-index: 8;
}
       
#cell24 {
    display: none;
    top: 58%;
    left: 67%;
    background: #00000013;
    color: #ffffff;
    text-align: center;
    padding: 0;
    border: 1px dashed #000000;
    height: 40%;
    width: 24%;
    overflow: auto;
    overflow-y: scroll;
    border-radius: 50%;
    box-shadow: 0 0 16px rgba(255, 255, 255, 0.8);
    z-index: 3;
    text-shadow: 2px 2px 4px #000000;
}
         
#cell25 {
    top: 72%;
    left: 8%;
    display: block;
    height: 40%;
    width: 40%;
    background: tansparent;
    font-size: 12pt;
    font-weight: bold;
    color: black;
    font: verdana;
    font-size: 16pt;
    border-radius: 0;
    box-shadow: 0;
    border: 0;
    text-shadow: 2px 2px 4px #ffffff;
    z-index: 8;
} 

#cell26 { 
    display: none;
    top: 58%;
    left: 67%;
    background: #00000013;
    color: #ffffff;
    text-align: center;
    padding: 0;
    border: 1px dashed #000000;
    height: 40%;
    width: 24%;
    overflow: auto;
    overflow-y: scroll;
    border-radius: 50%;
    box-shadow: 0 0 16px rgba(255, 255, 255, 0.8);
    z-index: 3;
    text-shadow: 2px 2px 4px #000000;
}

<!-- Divs with content -->
<div id="cell24" class="cell content" style="display: none;">
  <br><br><br><br>Content #1<br><br><br><br>
</div>
<div id="cell26" class="cell content" style="display: none;">
  <br><br><br><br>Content #2<br><br><br><br>
</div>

<!-- Divs with event -->
<div id="cell23" class="cell"
     onmouseover="showDiv('cell24')"
     onmouseout="hideDiv('cell24')">
  <p>Load Content #1</p>
</div>
<div id="cell25" class="cell"
     onmouseover="showDiv('cell26')"
     onmouseout="hideDiv('cell26')">
  <p>Load Content #2</p>
</div>

Parsa Farahani · Accepted Answer · 2025-02-06 22:47:29Z

This is the new html:

   <div id="cell24" class="cell" onmouseover="showDiv('cell24')" onmouseout="hideDiv('cell24')">
        <br><br><br><br>Content #1<br><br><br><br>
    </div>
        <div id="cell26" class="cell" onmouseover="showDiv('cell26')" onmouseout="hideDiv('cell26')">
        <br><br><br><br>Content #2<br><br><br><br>
    </div>

        <div id="cell23" class="cell" onmouseover="showDiv('cell24')" onmouseout="hideDiv('cell24')">
                 <p2>Load Content #!</p2>
                 </div>
        <div id="cell25" class="cell" onmouseover="showDiv('cell26')" onmouseout="hideDiv('cell26')">
        <p2>Load Content #2</p2>
        </div>

This is js too, I added time out so you can see the opening div:

function showDiv(divId) {

    // Show the selected div
    const selectedDiv = document.getElementById(divId);
    if (selectedDiv) {
        selectedDiv.style.display = 'block'; // Show the selected cell
    }
}

function hideDiv(divId) {
    setTimeout(() => {
        const selectedDiv = document.getElementById(divId);
        if (selectedDiv) {
            selectedDiv.style.display = 'none'; // Show the selected cell
        }
    } , 3000)
    
}

Let me know if this works.

Collectives™ on Stack Overflow

Making divs dissappear onmouseout or when not hovering in CSS or JavaScript

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related