CSS三角气泡框是在某些需要视觉上的提示的地方非常实用的组件,如何在鼠标经过时显示或隐藏这个气泡框呢?下面我们来一步步实现。/*首先定义CSS样式*/ .bubble { position: rela
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') })
好了,现在我们已经实现了鼠标经过时显示气泡框,离开时隐藏气泡框的效果。
粉丝
0
关注
0
收藏
0