Question

我知道如何获得一个定制的＆＃34;标题框＆＃34;当悬停在链接上时。这将是这样的：

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

然后显示该框，其中包含您在a-tag标题中输入的描述：

但也是普通的黄色＆＃34;显示说明框，我不想要这样。是否可以隐藏默认的标题框？

<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();} );

没有运气......

我真正想要的是取代默认的＆＃34;标题框＆＃34;定制的。这是否可能没有默认的＆＃34;标题框＆＃34;可见？

更新即使我得到了我非常满意的答案，我实际上有点失望，因为我认为在css3中使用[title]的想法很酷，但实际上太复杂了，无法实现我想要的东西（不是很复杂）编程术语，但unessecary涉及javascript）。我已经决定以这种方式做到这一点＃34;通过创建有序列表

<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，然后在CSS中使用attr(data-title)来显示“悬停框”。

我认为您无法阻止浏览器显示title属性：但如果您将其重命名（例如data-title）则不应显示。

Answer 2

您可以在销毁之前将标题值保留在其他位置。自定义数据属性可用于自定义标题。像这样......

  $(this).attr("data-title",$(this).attr("title"));
  $(this).stop().attr('title', 'description of the link');

并相应地更改css中的属性。

隐藏链接中的默认标题框（工具提示）

2 个答案: