在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属性。因此，除非有一些禁用每个浏览器的默认行为的hacky方法，否则可能无法实现此目的。

编辑：显然是isn't possible in Chrome，但是possible in Firefox。

替代解决方案

除非你绝对必须专门使用title属性，否则最简单和最简单的解决方案可能只是使用另一个标记而不是title，例如{{1 }}。这样，您仍然无法触发默认行为，同时仍然可以实现默认样式。

＆＃13;

＆＃13;

data-title

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

使用javascript Element.removeAttribute()

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;