Html 在悬停时隐藏标题标签
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8078388/
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
Hiding title tags on hover
提问by Aaron Lee
I've looked through previous questions and none of them have really worked for me, i've checked google to and the information I found seems pretty vague, so I thought i'd try here.
我浏览了以前的问题，但没有一个对我有用，我查过谷歌，发现的信息似乎很模糊，所以我想我会在这里尝试。
Is anyone aware/or have tackle the problem of title tags displaying on hover. I have a series of links and images that will be assigned title tags, however, some of them will be displaying information that would be better off not popping up on hover.
是否有人知道/或已经解决了悬停时显示标题标签的问题。我有一系列链接和图像将被分配标题标签，但是，其中一些将显示最好不要在悬停时弹出的信息。
Is there a global function I could use to apply this to all manner of title tags? An example would be as follows:
是否有一个全局函数可以用来将其应用于各种标题标签？一个例子如下：
<a href="service.php" title="services for cars" />
If possible I would like to disable the title "services from cars" appearing on hover.
如果可能，我想禁用悬停时出现的标题“来自汽车的服务”。
Thanks again.
再次感谢。
回答by Shadow Wizard is Ear For You
This should work just fine to disable single title:
这应该可以很好地禁用单个标题：
<a href="service.php" title="services for cars" onmouseover="this.title='';" />
If you need the title afterwards, you can restore it:
如果您之后需要标题，您可以恢复它：
<a href="service.php" title="services for cars" onmouseover="this.setAttribute('org_title', this.title'); this.title='';" onmouseout="this.title = this.getAttribute('org_title');" />
This way is not generic though.. to have it applied to all the anchors, have such JavaScript code:
虽然这种方式不是通用的……要将其应用于所有锚点，请使用以下 JavaScript 代码：
window.onload = function() {
var links = document.getElementsByTagName("a");
for (var i = 0; i < links.length; i++) {
var link = links[i];
link.onmouseover = function() {
this.setAttribute("org_title", this.title);
this.title = "";
};
link.onmouseout = function() {
this.title = this.getAttribute("org_title");
};
}
};
Edit: to apply same for more tags (e.g. <img>) first move the core of the code to a function:
编辑：要对更多标签（例如<img>）应用相同的代码，首先将代码的核心移动到一个函数中：
function DisableToolTip(elements) {
for (var i = 0; i < elements.length; i++) {
var element = elements[i];
element.onmouseover = function() {
this.setAttribute("org_title", this.title);
this.title = "";
};
element.onmouseout = function() {
this.title = this.getAttribute("org_title");
};
}
}
Then change the code to:
然后将代码更改为：
window.onload = function() {
var links = document.getElementsByTagName("a");
DisableToolTip(links);
var images = document.getElementsByTagName("img");
DisableToolTip(images);
};
回答by Brad
If your reasoning for using the 'title' tag is for Aria compliance, use aria-label instead.
如果您使用 'title' 标签的理由是为了符合 Aria，请改用 aria-label。
<a href="service.php" aria-label="services for cars" />
回答by Gewitter
Try setting two titles, an empty one that will be picked by the browser as tooltip and then the one you need:
尝试设置两个标题，浏览器会选择一个空标题作为工具提示，然后是您需要的标题：
<a href="service.php" title="" title="services for cars" />
回答by user1048682
Although this has already been answered in standard JS.
虽然这已经在标准 JS 中得到了回答。
Here is a jQuery solution.
这是一个 jQuery 解决方案。
$('a').hover(
function() {
$(this).attr("org_title", $(this).attr('title'));
$(this).attr('title', '');
}, function() {
$(this).attr('title', $(this).attr("org_title"));
}
);
回答by Manarbre
A simple alternative is to use CSS on the container of the image (the div or a):
一个简单的替代方法是在图像的容器（div 或 a）上使用 CSS：
pointer-events: none;
cursor: default;
回答by AlexMorley-Finch
You can't disable them because Its a generic part of browsers / html specification. But i am aware that you can style them using css and javascript, so a display:none properly should be able to be used somewhere.
您不能禁用它们，因为它是浏览器/html 规范的通用部分。但我知道您可以使用 css 和 javascript 设置它们的样式，因此 display:none 应该能够在某处正确使用。
look here
看这里
