如何使用CSS或JavaScript防止默认标题行为

Question

可能重复：
禁用链接和<abbr>上的浏览器工具提示

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

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

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

- StaticVariable

---

浏览器根本不允许你使用https://dev59.com/pXNA5IYBdhLWcg3wSrma https://dev59.com/_ljUa4cB1Zd3GeqPWf2_ https://dev59.com/5XRB5IYBdhLWcg3w9Lvn来禁用工具提示。 - Prinzhorn

Answer 1

我能想到最好的方法是使用jQuery（或纯JS）去取消属性。

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

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

编辑：只是想向那些对此进行负面评价的人表达观点-问题得到了正确回答。如果您因为使用JS而对答案提出异议，请阅读帖子标题。自己编造属性是愚蠢的，并且（坦率地说）这是某些“Web开发人员”存在的问题。因为它不按照您认为应该的方式工作而将其黑客化是短视的。标题标签是WAI-ARIA和Section 503问题，因此使它们无用是愚蠢的（还有任何遵循标准可能获得的SEO信用）。

- Fluidbyte

---

不确定为什么你被踩了...你是对的。 - Justice Erolin

感谢@JusticeErolin。我也不确定。 - Fluidbyte

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

- StaticVariable

---

如果你要编写自定义属性，最好保持一些“标准”，并使用html5的data属性。这样也会使得与可能应用的JS框架更容易协作。 - Fluidbyte

因为你编写了一个属性atitle。你应该使用一个data属性来保持标准。 - Fluidbyte