如何使用 CSS 或 JavaScript 防止默认标题行为 [重复]

Question

可能重复：
Disabling browser tooltips on links and <abbr>s

a {
  color: #900;
  text-decoration: none;
}

a:hover {
  color: red;
  position: relative;
}

a[title]:hover:after {
  content: attr(title);
  padding: 4px 8px;
  color: #333;
  position: absolute;
  left: 0;
  top: 100%;
  white-space: nowrap;
  z-index: 20px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  -moz-box-shadow: 0px 0px 4px #222;
  -webkit-box-shadow: 0px 0px 4px #222;
  box-shadow: 0px 0px 4px #222;
  background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
  background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #eeeeee),color-stop(1, #cccccc));
  background-image: -webkit-linear-gradient(top, #eeeeee, #cccccc);
  background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
  background-image: -ms-linear-gradient(top, #eeeeee, #cccccc);
  background-image: -o-linear-gradient(top, #eeeeee, #cccccc);
}

我有以下代码来更改标题标签的默认行为。 这很好用，但问题是它还显示了默认样式的标题。这是我的Fiddle link。

有没有办法使用 jQuery 或 CSS 来解决这个问题？

Answer 1

我能想到的最好的办法是用 jQuery（或纯 JS）取消设置属性

$('a').attr('title', '');

然后像使用 after 一样创建一个 div，但通过 JS。据我所知，没有办法禁用 title 的默认行为。

编辑：

只是为了向对此投反对票的人指出一点-问题已正确回答。如果您因为使用 JS 而决定回答错误，请阅读帖子标题。编造自己的属性是愚蠢的，而且（坦率地说）一定比例的“网络开发人员”有什么问题。因为它没有按照您认为它应该的方式工作而对某些东西进行黑客攻击是短视的。标题标签是 WAI-ARIA 和第 503 节的问题，因此使它们无用是愚蠢的（我们不要忘记您可能通过坚持标准获得的任何 SEO 信誉）。

Answer 2

^已解决

重命名title标签

使用这个

<a href="#" atitle="this is title"> hello </a>

a {
  color: #900;
  text-decoration: none;
}

a:hover {
  color: red;
  position: relative;
}

a[atitle]:hover:after {
  content: attr(atitle);
  padding: 4px 8px;
  color: #333;
  position: absolute;
  left: 0;
  top: 100%;
  white-space: nowrap;
  z-index: 20px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  -moz-box-shadow: 0px 0px 4px #222;
  -webkit-box-shadow: 0px 0px 4px #222;
  box-shadow: 0px 0px 4px #222;
  background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
  background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #eeeeee),color-stop(1, #cccccc));
  background-image: -webkit-linear-gradient(top, #eeeeee, #cccccc);
  background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
  background-image: -ms-linear-gradient(top, #eeeeee, #cccccc);
  background-image: -o-linear-gradient(top, #eeeeee, #cccccc);
}