Mapbox地图文章容器初始显示空白，如何实现仅Hover特定地点时显示？

问题根源与修复方案 #

核心问题 #

1. CSS样式冲突：#article-container的样式中同时写了display: none;和display: flex;，CSS规则会以后者为准，导致容器默认显示空白区域。
2. 潜在JS报错：updateArticle函数中尝试操作.info元素，但页面中未定义该元素，会触发报错中断后续逻辑。

具体修复步骤 #

1. 修正容器初始显示状态

找到#article-container的CSS定义，删除重复的display: flex;，保留初始隐藏设置：

#article-container {
    display: none; /* 初始隐藏容器 */
    height: 100vh;
    width: 25vw;
    overflow-y: scroll;
    padding: 20px;
    box-sizing: border-box;
    flex-direction: column; /* 保留flex布局属性，仅删除重复的display声明 */
    background: transparent;
}

2. 修复infoBox报错

页面中未添加.info元素，导致updateArticle函数中相关代码触发报错，二选一解决：

• 方案一：添加.info元素
  在<body>中地图容器后添加：

<div class="info">
    <h4>餐厅详情</h4>
</div>

• 方案二：注释报错代码
  在updateArticle函数中注释掉infoBox相关操作：

// Show the info box
// infoBox.style.display = 'block';

3. 确认hover逻辑有效性

你的startHover和stopHover函数逻辑是正确的，只需确保：

• 仅在hover"Tokyo Record Bar"或"International Wing Factory"时调用updateArticle
• 鼠标离开任何餐厅时，stopHover函数都会将容器设为隐藏

测试验证 #

修改后验证以下场景：

• 页面加载时，右侧文章容器完全隐藏
• Hover目标餐厅时，容器正常显示并加载对应文章内容
• 鼠标离开目标餐厅时，容器立即隐藏
• Hover其他餐厅时，容器保持隐藏状态

内容的提问来源于stack exchange，提问作者Emmy