求助：如何实现鼠标移出触发元素时隐藏对应Div（CSS/JS方案）

兄弟，我扫了一眼你的代码，立刻就发现hideDiv函数的逻辑完全写反了，这就是鼠标移出后div不消失的核心原因！另外代码里还有不少冗余和语法小错误，我给你一步步理顺：

先揪出原代码的问题： #

• hideDiv函数里，你把要隐藏的内容div（比如cell24、cell26）的display设成了block——这等于主动把它们显示出来，和你要隐藏的需求完全背道而驰
• 你先把所有目标div强制设为显示，再单独隐藏当前div，导致刚隐藏的div又被前面的代码改回显示，等于白操作
• 两个函数里硬写了一堆id，不仅冗余，后期加新内容div时要改一堆代码，维护起来巨麻烦

修正后的完整可运行方案： #

我帮你简化了逻辑，还给要控制的内容div统一加了类名，以后加新内容直接加类就行，不用改JS：

1. 优化后的JavaScript代码

// 给所有内容div统一加个content-cell类，不用再写一堆id
function showDiv(divId) {
    // 先隐藏所有内容div
    const allContentDivs = document.querySelectorAll('.content-cell');
    allContentDivs.forEach(div => {
        div.style.display = 'none';
    });
    // 再显示选中的目标div
    const targetDiv = document.getElementById(divId);
    if (targetDiv) {
        targetDiv.style.display = 'block';
    }
}

function hideDiv() {
    // 鼠标移出时，直接隐藏所有内容div（符合你要让其他内容能重新显示的需求）
    const allContentDivs = document.querySelectorAll('.content-cell');
    allContentDivs.forEach(div => {
        div.style.display = 'none';
    });
}

2. 对应的HTML修改（给内容div加统一类名）

<!-- 给所有需要控制显示隐藏的内容div加content-cell类 -->
<div id="cell24" class="cell content-cell">
<br><br><br><br>Content #1<br><br><br><br></div>
<div id="cell26" class="cell content-cell">
<br><br><br><br>Content #2<br><br><br><br></div>

<!-- 触发元素的onmouseout直接调用hideDiv，不用传id了 -->
<div id="cell23" class="cell" onmouseover="showDiv('cell24')" onmouseout="hideDiv()">
         <p2>Load Content #1</p2>
         </div>
<div id="cell25" class="cell" onmouseover="showDiv('cell26')" onmouseout="hideDiv()">
<p2>Load Content #2</p2>
</div>

3. 修正后的CSS代码（补全定位、修正拼写/语法错误）

#cell23 {
    top: 68%;
    left: 8%;
    display: block;
    height: 40%;
    width: 40%;
    background: transparent; /* 修正拼写错误：tansparent → transparent */
    font-size: 12pt;
    font-weight: bold;
    font-family: verdana; /* 修正语法：font: verdana → font-family: verdana */
    font-size: 16pt;
    border-radius: 0;
    box-shadow: none; /* 修正语法：box-shadow: 0 → box-shadow: none */
    border: 0;
    text-shadow: 2px 2px 4px #ffffff;
    z-index: 8;
    position: absolute; /* 必须加定位，top/left才会生效！ */
}   
       
#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;
    position: absolute; /* 补全定位 */
}
         
#cell25 {
    top: 72%;
    left: 8%;
    display: block;
    height: 40%;
    width: 40%;
    background: transparent; /* 修正拼写错误 */
    font-size: 12pt;
    font-weight: bold;
    font-family: verdana; /* 修正语法 */
    font-size: 16pt;
    border-radius: 0;
    box-shadow: none; /* 修正语法 */
    border: 0;
    text-shadow: 2px 2px 4px #ffffff;
    z-index: 8;
    position: absolute; /* 补全定位 */
} 

#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;
    position: absolute; /* 补全定位 */
}

额外提醒： #

我给所有用了top/left的div加了position: absolute，不然你的定位完全不生效——这也是你可能看不到元素正确位置的隐藏坑！

这样改完后，鼠标移到触发元素上会显示对应内容，移出后所有内容div都会隐藏，完美满足你的需求！

备注：内容来源于stack exchange，提问作者Phantom Loads