css三角气泡框显示隐藏

CSS三角气泡框是在某些需要视觉上的提示的地方非常实用的组件，如何在鼠标经过时显示或隐藏这个气泡框呢？下面我们来一步步实现。

/*首先定义CSS样式*/

.bubble {
  position: relative;
  background-color: #fff;
  color: #999;
  border: 1px solid #ccc;
  padding: 10px;
  border-radius: 5px;
  box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.1);
}

.bubble::before {
  content: '';
  position: absolute;
  top: -8px;
  left: 20px;
  width: 0;
  height: 0;
  border: 8px solid;
  border-color: transparent transparent #fff transparent;
  transform: rotate(45deg)
}

/* 定义CSS动画 */

.bubble-hide {
  opacity: 0;
}

.bubble-show {
  opacity: 1;
} 

接下来，我们使用JavaScript来实现鼠标经过时显示或隐藏气泡框。

/* 获取需要隐藏或显示的元素 */

const bubble = document.querySelector('.bubble')

/*鼠标经过时显示气泡框*/

bubble.addEventListener('mouseover', () => {
  bubble.classList.add('bubble-show')
})

/*鼠标离开时隐藏气泡框*/

bubble.addEventListener('mouseout', () => {
  bubble.classList.remove('bubble-show')
}) 

好了，现在我们已经实现了鼠标经过时显示气泡框，离开时隐藏气泡框的效果。