html - 我得到两个链接标题

Question

我对链接标题有疑问。我试图用 css 设计链接标题的样式。我的 CSS 是:

a[title]:hover:after {
  content: attr(title);
  padding: 2px 8px;
  position: absolute;
  left: 0;
  top: 100%;
  white-space: nowrap;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  border:1px solid #bce8f1;
  background-color:#d9edf7;
  color:#31708f;
  font-weight:700;
  box-shadow: 0 0 6px #bce8f1;
  z-index:99999999;
}

但是当我将鼠标悬停在链接上时，我得到了这个样式的标题，但我也得到了照片上的旧标题。

有什么想法吗？

谢谢

Answer 1

我不使用具有默认操作/样式的 title 属性，而是创建自己的。

<a href="/someplace.html" data-title="The Title of Someplace">Someplace</a>

然后您将更改 CSS 以反射(reflect)新属性。

a[data-title]:hover:after {
  content: attr(data-title);
  ...
}