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!!

Answer 1

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.

Answer 2

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>