Divs verschwinden lassen, wenn die Maustaste gedrückt wird oder wenn der Mauszeiger nicht in CSS oder JavaScript bewegt ⇐ CSS

[Guest]

Ich habe dafür gesorgt, dass die Divs dort angezeigt werden, wo sie sollten, aber alles CSS, das ich finden/herausfinden konnte, erfordert, dass sie direkt nebeneinander auf der Seite stehen. Das ist nicht der Fall, also habe ich es mit js versucht. Dadurch werden sie geladen, aber nicht ausgeblendet, wenn sich die Maus nicht über dem auslösenden Element befindet, sodass andere an derselben Stelle erscheinen können. Folgendes habe ich bisher...

Code: Select all

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

Code: Select all

#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;
}

Code: Select all

Content #1

Content #2

Load Content #!

Load Content #2

Irgendwelche Vorschläge, wie man sie bei der Maus verschwinden lässt? Vielen Dank im Voraus für Ihre Zeit!!