Исчезновение элементов div при наведении курсора мыши или при их отсутствии в CSS или JavaScript. ⇐ CSS

[Anonymous]

Я добился того, чтобы элементы div появлялись там, где они должны, но весь CSS, который я смог найти/вычислить, требует, чтобы они располагались непосредственно рядом друг с другом на странице. Это не так, поэтому я попробовал js. Это заставляет их загружаться, но не исчезает, когда указатель мыши не находится над триггерным элементом, чтобы другие могли появиться в том же месте. Вот что у меня есть на данный момент...

Код: Выделить всё

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

Код: Выделить всё

Content #1

Content #2

Load Content #!

Load Content #2

Есть какие-нибудь предложения о том, как заставить их исчезать при наведении курсора мыши? Заранее спасибо за ваше время!!!

Подробнее здесь: https://stackoverflow.com/questions/793 ... javascript