一、使用CSS的:hover伪类实现鼠标悬停效果
CSS的:hover伪类可以给某个元素设置鼠标悬停时的样式，我们可以利用这个特性来实现鼠标悬停出现隐藏文字的效果。
<style>
.hover-effect {
position: relative;
/* 隐藏文字 */
color: transparent;
/* 设置hover状态下文字显示 */
&:hover::before {
content: attr(data-content);
position: absolute;
top: 100%;
left: 0;
padding: 5px 10px;
background-color: #333;
color: #fff;
border-radius: 5px;
white-space: nowrap;
}
}
</style>
<div class="hover-effect" data-content="这里是隐藏的文字">鼠标悬停显示文字</div>
以上代码中，我们先使用CSS将隐藏文字的颜色设置为透明，然后在:hover状态下通过伪元素::before显示出相应的隐藏文字。
二、使用JavaScript实现鼠标悬停出现隐藏文字
除了使用CSS，我们也可以使用JavaScript来实现鼠标悬停出现隐藏文字的效果。
<script>
const hoverEle = document.querySelector('.hover-effect-js');
const content = hoverEle.dataset.content;
let tooltip = null;
hoverEle.addEventListener('mouseover', () => {
tooltip = document.createElement('div');
tooltip.innerHTML = content;
tooltip.style = `
position: absolute;
top: 100%;
left: 0;
padding: 5px 10px;
background-color: #333;
color: #fff;
border-radius: 5px;
white-space: nowrap;
`;
hoverEle.appendChild(tooltip);
});
hoverEle.addEventListener('mouseout', () => {
if (tooltip) {
hoverEle.removeChild(tooltip);
tooltip = null;
}
});
</script>
<div class="hover-effect-js" data-content="这里是隐藏的文字">鼠标悬停显示文字</div>
这段代码中，我们首先获取到对应元素和隐藏文字内容，然后通过添加和删除子元素的方式，在鼠标悬停和移出时分别显示和隐藏相应的文字内容。
三、结合CSS和JavaScript实现鼠标悬停出现隐藏文字
除了单独使用CSS或JavaScript，我们还可以结合二者来实现更为精细的效果。
<style>
.hover-effect-combine {
position: relative;
/* 隐藏文字 */
color: transparent;
}
.hover-effect-combine::before {
content: attr(data-content);
position: absolute;
top: 100%;
left: 0;
padding: 5px 10px;
background-color: #333;
color: #fff;
border-radius: 5px;
white-space: nowrap;
/* 只在JavaScript加载成功前显示 */
visibility: hidden;
}
</style>
<script>
const hoverEle = document.querySelector('.hover-effect-combine');
const content = hoverEle.dataset.content;
let tooltip = hoverEle.querySelector('::before');
hoverEle.addEventListener('mouseover', () => {
tooltip.style.visibility = 'visible';
});
hoverEle.addEventListener('mouseout', () => {
tooltip.style.visibility = 'hidden';
});
</script>
<div class="hover-effect-combine" data-content="这里是隐藏的文字">鼠标悬停显示文字</div>
在以上代码中，我们将隐藏文字的方式放在了CSS中，而JavaScript只负责添加和删除样式中的visibility属性来控制文字的显示和隐藏。这样做可以充分利用CSS的特性，减少JavaScript代码的复杂度，同时又能保证动画效果的顺畅。
原创文章，作者：RTLK，如若转载，请注明出处：https://www.506064.com/n/146873.html
微信扫一扫 
支付宝扫一扫 