本文详解如何通过 CSS 重置与 DOM 控制，彻底消除 Mapbox 地图右侧因 #article-container 导致的空白占位，并实现「仅在悬停指定地点时动态显示」的交互效果。
本文详解如何通过 css 重置与 dom 控制，彻底消除 mapbox 地图右侧因 `#article-container` 导致的空白占位，并实现「仅在悬停指定地点时动态显示」的交互效果。
在你的 HTML 结构中，<div id="map"></div> 和 <div id="article-container"></div> 是并列的兄弟元素，且 设置了 display: flex。这导致浏览器默认将两个子元素水平排列：地图占据 100vw，而即使 #article-container 的 display 被设为 none，其原始 width: 25vw 在 Flex 布局中仍可能参与尺寸计算（尤其当未显式设置 flex-shrink: 0 或存在隐式 flex-basis 时），造成右侧不可见但实际存在的空白区域。
✅ 正确解法分两步：
1. 修复布局结构：脱离 Flex 干扰
将 #article-container 从 的 Flex 主轴中移出，改为绝对定位覆盖层，避免影响地图渲染空间：
/* 替换原 #article-container 样式 */
#article-container {
position: absolute;
top: 0;
right: 0;
height: 100vh;
width: 25vw;
overflow-y: auto;
padding: 20px;
box-sizing: border-box;
background: rgba(255, 255, 255, 0.92);
backdrop-filter: blur(4px);
z-index: 1000;
display: none; /* 初始隐藏 */
transition: transform 0.3s ease;
}
/* 可选：添加滑入动画 */
#article-container.show {
display: flex;
transform: translateX(0);
}
#article-container.hide {
transform: translateX(100%);
}
同时，移除 的 display: flex（这是关键！），改用更可控的布局方式：
body {
margin: 0;
overflow: hidden;
font-family: 'Junicode', sans-serif;
/* 删除 display: flex; —— 防止 article-container 占据空间 */
}
#map {
height: 100vh;
width: 100vw;
}
⚠️ 注意：你原答案中提到的「删除
display: flex并设置.mapboxgl-canvas宽度」并不准确——.mapboxgl-canvas是 Mapbox 内部生成的 canvas 元素，不应手动干预；真正需调整的是容器层级关系。
2. JavaScript 中精准控制显隐逻辑
在 startHover() 和 stopHover() 中，统一使用 class 切换替代内联样式，确保样式优先级和可维护性：
function startHover(e) {
const feature = e.features[0];
const container = document.getElementById("article-container");
// 仅对目标餐厅显示文章容器
if (feature.properties.name === "Tokyo Record Bar" ||
feature.properties.name === "International Wing Factory") {
updateArticle(e);
container.classList.remove('hide');
container.classList.add('show');
}
}
function stopHover(e) {
const container = document.getElementById("article-container");
container.classList.remove('show');
container.classList.add('hide');
}
✅ 最终验证要点
- 检查浏览器开发者工具的 Computed Styles，确认
#article-container的display确实为none（而非flex）且position: absolute生效； - 确保
#map的width: 100vw不受其他父容器约束（如外层div未意外添加 padding/margin）； - 若仍见空白，检查是否有未关闭的
<div> 或遗漏的 <code>，导致文档流异常。通过以上调整，文章容器将完全脱离文档流，不再占用右侧空间；悬停时平滑滑入，离开时优雅收起——既解决视觉干扰，又提升交互专业度。
