宣武区软件开发,宣武区网站建设,宣武区微信小程序制作,宣武区抖音小程序开发

宣武区软件开发,宣武区网站建设,宣武区微信小程序制作,宣武区抖音小程序开发
鼠标放上(悬停)时,隐藏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属性