javascript - 隐藏链接的默认标题框(工具提示)

Question

我知道如何在将鼠标悬停在链接上时获得自定义的“标题框”。那将是这样的:

a[title]:hover:after {
   content: attr(title);
   position: absolute;
   left: 0px;
   top: 100%;
   background-color:#ffffff;
   color:#000000;
}

然后会显示一个框，其中包含您在 a-tag 标题中输入的描述:

但也会显示“普通的淡黄色”描述框，我不希望这样。是否可以隐藏默认标题框？

<a href"blabla.php" title="{description}">Bla bla bla</a>

如果我这样做

$("a").hover(function(){
    $(this).stop().attr('title', 'description of the link');},
    function(){$(this).stop().attr();
});

然后根本没有显示标题(当然)

我还测试过:

$("a").mouseover(function(e){ e.preventDefault();} );

没有运气......

我真正想要的是用自定义的替换默认的“标题框”。在没有可见的默认“标题框”的情况下这可能吗？

更新:尽管我得到了我非常满意的答案，但实际上我有点失望，因为我认为在 css3 中使用 [title] 的想法很酷，但实际上太复杂而无法实现我想要的(在编程方面并不复杂) ，但不需要涉及 javascript)。我决定通过创建有序列表以“旧方法”来做到这一点

<ul>
<li>Item 1
    <ul class="description">
    <li>description</li>
    </ul> 
</li>
<li>Item 2
    <ul class="description">
    <li>description</li>
    </ul> 
</li>
</ul>

并在将鼠标悬停在元素上时显示描述，例如:

.description {display:none;}
li:hover > ul {display:block;}

Answer 1

使用 JS，您可以先将属性从 title 更改为 data-title，然后在您的代码中使用 attr(data-title) CSS 来显示您的“悬停框”。

我认为你不能阻止浏览器显示 title 属性:但是如果你重命名它(例如 data-title)它不应该显示。