Делать Divs onmouseout или когда не зависать в CSS или JavaScript ⇐ CSS

[Anonymous]

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


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


Content #1

Content #2

Load Content #!

Load Content #2
< /code>
< /div>
< /div>
< /p>
Любые предложения о том, как заставить их разослать Onmouseout? Заранее спасибо за ваше время !!


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