鼠标放上(悬停)时,隐藏a标签的title属性
发布时间:2025-02-06 阅读量:371
要在鼠标悬停时隐藏 <a> 标签的 title 属性,可以使用 CSS 和 JavaScript 来实现。
方法一:使用纯 CSS
CSS 本身无法直接修改或隐藏 title 属性,需要使用伪元素等方法,且实际效果也并不好,不推荐使用CSS方法来隐藏 <a> 标签的 title 属性。
方法二:使用 JavaScript
代码如下
<script>
document.addEventListener('DOMContentLoaded', function () {
const links = document.querySelectorAll('a[title]');
links.forEach(link => {
let title = link.getAttribute('title');
link.addEventListener('mouseenter', () => {
link.removeAttribute('title');
});
link.addEventListener('mouseleave', () => {
link.setAttribute('title', title);
});
});
});
</script>
实现原理:鼠标移入a标签时,通过removeAttribute()方法移除a标签的title属性,鼠标移出时通过setAttribute()方法设置a标签的title属性