在其上应用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> 

Answer 2

使用javascript Element.removeAttribute（）

  //select all anchor with a given title, in this case a[title=Edit] var anchor = document.querySelectorAll("a[title=Edit]"); for(var i=0; i<anchor.length;i++){ //anchor[i].title = ""; anchor[i].removeAttribute("title"); } 

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

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