我得到两个链接标题

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以反映新属性。

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

Answer 2

使用data-title代替title：

<强> HTML：

<a href="mailto:info@vermistedieren.be" data-title="Als u nog vragen heeft, stel ze gerust. Wij staan tot uw dienst!">

<强> CSS：

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