在CSS上应用CSS后,删除锚标签的旧设计标题

Question

我可以title在锚标记内更改属性的设计,即使默认标记与更改的标记一起出现.

我想知道是否可以删除默认title工具提示,如下所示？

---

到目前为止,这是我的代码:

<a title="Edit"><img alt="" src="dist/img/edit.png" ></a>

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

a[title]:hover:after {
    content: attr(title);
    padding: 2px 4px;
    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);
}

提前致谢.

Answer 1

我认为没有一种简单的方法可以在仍然使用该title属性的同时完成您想要的操作。所以你原来的问题的答案是：

是否可以删除默认标题工具提示？

答：可能不可能。每个浏览器决定如何处理该title属性。因此，除非有一些奇怪的方法来禁用每个浏览器的默认行为，否则可能无法实现这一目标。

编辑：显然这在 Chrome 中是不可能的，但在 Firefox 中是可能的。

替代解决方案

除非您绝对必须专门使用该title属性，否则最简单的解决方案可能是仅使用另一个标签而不是title，例如data-title。这样，您就不会触发默认行为，同时仍然实现默认样式。

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

a[data-title]:hover:after {
    content: attr(data-title);
    padding: 2px 4px;
    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);
}

<a data-title="Edit"><img alt="" src="dist/img/edit.png" ></a>