使用 javascript/jquery 在鼠标悬停时隐藏链接的标题属性
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12663433/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
hide title attribute from link on mouse hover with javascript/jquery
提问by tarisata
I am using the title attribute in all my links but I don't want to be visible on mouse hover, but still visible in the code for screen readers.
我在所有链接中都使用了 title 属性，但我不想在鼠标悬停时可见，但在屏幕阅读器的代码中仍然可见。
var links = document.getElementsByTagName('a');
for (var i = 0; i < links.length; i++) {
if (links[i].className == 'suppress') {
links[i]._title = links[i].title;
links[i].onmouseover = function() {
this.title = '';
}
links[i].onmouseout = function() {
this.title = this._title;
}
回答by moonwave99
Using jQuery, you can hide the titleattr on hover, and replace it on mouseout:
使用 jQuery，您可以title在悬停时隐藏attr，并在 mouseout 时替换它：
$(function(){
$('a').hover(function(e){
$(this).attr('data-title', $(this).attr('title'));
$(this).removeAttr('title');
},
function(e){
$(this).attr('title', $(this).attr('data-title'));
});?
});
Like in this fiddle.
就像在这个小提琴中一样。
回答by Praveen Kumar Purushothaman
Since you are using jQuery, you can do it in a simple way:
由于您使用的是 jQuery，您可以通过一种简单的方式进行操作：
$(document).ready(function(){
$("a").removeAttr("title");
});
Or, setting it to empty value:
或者，将其设置为空值：
$(document).ready(function(){
$("a").attr("title", "");
});
If this is gonna change the way the screen readers read, then, you can just target on hover.
如果这会改变屏幕阅读器的阅读方式，那么您可以将鼠标悬停在鼠标上。
$(document).ready(function(){
$("a").hover(function(){
$(this).attr("rel", $(this).attr("title"));
$(this).removeAttr("title");
}, function(){
$(this).attr("title", $(this).attr("rel"));
$(this).removeAttr("rel");
});
});
回答by DrupalFever
I was trying to create a bubble tool-tip in CSS but the browser tool-tip would always appear and mess things up. So, like you, I needed to disable the default tool-tip.
我试图在 CSS 中创建一个气泡工具提示，但浏览器工具提示总是会出现并把事情搞砸。所以，和你一样，我需要禁用默认的工具提示。
I used a bit of JQuery to remove the "Title" tag but only on mouse hover. As soon as the mouse is out, the "Title" tag is restored.
我使用了一些 JQuery 来删除“标题”标签，但只在鼠标悬停时。一旦鼠标离开，“标题”标签就会恢复。
Following is a DIV with some "Title" content:
以下是带有一些“标题”内容的 DIV：
<div class="tooltip-class" title="This is some information for our tooltip.">
This is a test
</div>
Now you can run the following JQuery to hide the Title tag on mouse hover:
现在您可以运行以下 JQuery 来隐藏鼠标悬停时的 Title 标签：
$(document).ready(function(){
$(".tooltip-class").hover(function(){
$(this).attr("tooltip-data", $(this).attr("title"));
$(this).removeAttr("title");
}, function(){
$(this).attr("title", $(this).attr("tooltip-data"));
$(this).removeAttr("tooltip-data");
});
});
Following is a link to the full example:
以下是完整示例的链接：
