触碰一个盒子显示另一个盒子，网站首页导航栏，用css怎么实现

在网页设计中，如果你想要触碰一个元素（比如一个盒子）时显示另一个盒子，通常可以使用CSS的伪类`:hover`配合JavaScript或者jQuery等库来实现交互效果。这里是一个简单的例子：

1. **HTML结构**:

<div class="parent-box">
  <div class="trigger-box">点击我</div>
  <div class="hidden-box" style="display:none;">显示内容</div>
</div>

这里的`.parent-box`是包含两个子盒子的容器，`.trigger-box`是触发元素，`.hidden-box`是需要隐藏显示的元素。

2. **CSS样式**:

.parent-box {
  position: relative;
}

.trigger-box {
  background-color: #ccc;
  padding: 10px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.hidden-box {
  background-color: #f00;
  display: none; /* 默认隐藏 */
}

3. **JavaScript/jQuery示例** (可选)：

$(".trigger-box").on("mouseover", function() {
  $(".hidden-box").show();
}).on("mouseout", function() {
  $(".hidden-box").hide();
});

当鼠标悬停在`.trigger-box`上时，`.hidden-box`会显示；移开鼠标时则隐藏。CSS的过渡属性使得切换过程平滑。