鼠标悬停特定div时显示新元素及调整其他元素透明度的实现咨询

不用Observer，直接通过鼠标事件监听就能搞定这个交互，毕竟是hover触发的状态切换，事件监听比Observer更直接高效。

1. HTML结构设计 #

把所有气泡放在一个容器里，给“business rules”气泡单独加标识，关联的新气泡默认隐藏，放在目标气泡附近：

<div class="bubbles-container">
  <div class="bubble">气泡A</div>
  <div class="bubble">气泡B</div>
  <div id="business-rules" class="bubble">business rules</div>
  <!-- 关联新气泡，默认隐藏 -->
  <div class="sub-bubble hidden">关联气泡1</div>
  <div class="sub-bubble hidden">关联气泡2</div>
</div>

2. CSS样式配置 #

• 基础气泡样式自定义，加上过渡动画让状态切换更丝滑
• 用.hidden类隐藏新气泡，.dimmed类实现其他气泡的低透明度效果：

.bubbles-container {
  position: relative;
  width: 600px;
  height: 400px;
}
.bubble {
  width: 120px;
  height: 60px;
  background: #2563eb;
  border-radius: 30px;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  transition: opacity 0.3s ease;
  cursor: pointer;
}
.sub-bubble {
  width: 90px;
  height: 45px;
  background: #16a34a;
  border-radius: 22px;
  color: #fff;
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}
/* 隐藏新气泡的类 */
.hidden {
  opacity: 0;
  pointer-events: none;
}
/* 其他气泡变暗的类 */
.dimmed {
  opacity: 0.3;
}

3. JavaScript事件逻辑 #

给“business rules”气泡绑定mouseover和mouseout事件，切换对应类的状态：

const targetBubble = document.getElementById('business-rules');
const allBubbles = document.querySelectorAll('.bubble');
const subBubbles = document.querySelectorAll('.sub-bubble');

// 鼠标悬停时的逻辑
targetBubble.addEventListener('mouseover', () => {
  allBubbles.forEach(bubble => {
    if (bubble !== targetBubble) bubble.classList.add('dimmed');
  });
  subBubbles.forEach(sub => sub.classList.remove('hidden'));
});

// 鼠标离开时的逻辑
targetBubble.addEventListener('mouseout', () => {
  allBubbles.forEach(bubble => bubble.classList.remove('dimmed'));
  subBubbles.forEach(sub => sub.classList.add('hidden'));
});

补充注意点 #

如果你的气泡是图片上的热点区域，把<div>换成<map>+<area>标签定义可hover区域就行，事件逻辑完全通用，只需要调整新气泡的定位坐标即可。

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