<a href="link.html" title="Titletext">
...是代码。
title
由于slimbox ,我需要使用该属性,但我想隐藏将鼠标悬停在链接上时显示的标题文本。
有任何想法吗?
一个很好的简单怎么样:
<a href="link.html" title="Titletext"><span title=" ">text</span></a>
(更好的是,在嵌套标题中放置一些真正有用的东西。)
假设您在 a 标签中使用图像标签,您可以只为图像使用替代标题(甚至是空格),当您将鼠标悬停在链接上时,它将覆盖链接的标题。
使用 jQuery 真的很容易
$("li.menu-item > a").attr('title', '');
这将从 li 类菜单项的任何 a 元素中删除标题 - 当然你可以得到幻想,所以它们只是隐藏在鼠标上:)
关于我在几个网站上看到的“一个不错的简单”建议,我个人不建议这样做,原因有两个。
屏幕阅读器和视障用户依赖于大声读出的标题属性。我相信这是它们在锚标签中的最初目的和原因,并且是 USA Gov. Web Accessibility Section 508 的一个重要方面。我认为在这种情况下,屏幕阅读器会阅读所有标题;第一个,然后是第二个,这对于视障用户来说可能非常混乱。如果它包含不同的文本,他们将不明白为什么他们会听到两个 esp。他们听到的是两个不同的主播吗?如果是这样,为什么他们不能单击或选择他们听到的另一个页面并只获得一个网页(作为场景)。
如果您在标题的 Google 和许多其他搜索引擎中添加额外的文本,则可能会将此操作视为黑帽 seo,并可能导致您的网站被禁止进入该搜索引擎列表(又名填充),这已经发生在德国的 BMW 上。
我个人认为最好的方法是保留 title 属性,因为它的功能,然后使用 Javascript 或 css 以某种方式隐藏它。这些方法对屏幕阅读器、网络爬虫和视障用户没有影响。
我对 jquery 很感兴趣... ;) 我需要这个作为投资组合:灯箱的标题标签,但鼠标悬停时没有。这对我有用,谢谢你的提示!
$(function(){
$("li.menu-item > a").hover(function(){
$(this).stop().attr('title', '');},
function(){$(this).stop().attr();
});
});
// Suppress tooltip display for links that have the classname 'suppress'
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;
}
}}
引用我对问题的评论中链接的第一个骗子的Aron Rotteveel的回答(禁用链接和 <abbr>s 上的浏览器工具提示)
您不必将title
属性与 Slimbox 一起使用。请参阅本页顶部附近的多个图像示例: http ://code.google.com/p/slimbox/wiki/MooToolsAPI 。
您可以简单地title
从锚点中删除属性,并将title
文本(图像的描述)传递给 Slimboxopen
函数,您可以使用onclick
锚点事件调用该函数。
最简单的方法是:
使用您的 slimbox 后,在其下方添加以下代码:
$('*[title]').removeAttr('title');
希望它可以帮助..
没有保证,但取决于 Slimbox 的工作方式,您可能能够包含标题,然后在页面加载几秒钟后使用 jQuery 之类的东西将其删除。假设 Slimbox 索引 Title 属性并在读入后将其存储在某处,那么在发生这种情况后您可能可以安全地删除它。
难道你不能只遍历 DOM 中的链接并将 title 属性设置为空字符串。
var DOMlinks = document.links;
for(i=0;i<DOMlinks.length;i++){
DOMlinks[i].title = ""
}
用一个空的jQuery 工具提示覆盖/覆盖它?
如果您使用的是 jquery,您可以执行以下操作
$("a").mouseover(function(e){ preventdefault();} );
(虽然没有测试过)
使用 David Thomas 的想法,您可以使用 jQuery 创建更优雅的解决方案:
$('[title]').each(function(){
$(this).data('original-title', $(this).attr('title'));
}).hover(
function () {
$(this).attr('title','')
}, function () {
$(this).attr('title',$(this).data('original-title'))
});
jQuery 解决方案 - 这应该是直截了当的:
var hiddenTitle; //holds the title of the hovered object
$("li.menu-item > a").hover(function() {
hiddenTitle = $(this).attr('title'); //stores title
$(this).attr('title',''); //removes title
}, function() {
$(this).attr('title',hiddenTitle); //restores title
});
这是我的 jQuery 解决方案,它可以满足您的所有需求并保持 title 属性的正确使用。只需根据您的需要更改选择器。
/*
* jQuery remove title browser tooltip
*/
var removeTitleSelector = 'a.removeTitle';
jQuery('body').on('mouseover', removeTitleSelector, function () {
jQuery(this).data('title', jQuery(this).attr('title'));
jQuery(this).removeAttr('title');
}).on('mouseout', removeTitleSelector, function () {
jQuery(this).attr('title', jQuery(this).data('title'));
});
正如在另一个问题上所读的那样,我建议将“标题”属性切换为某个“数据标题”,以使其可供残疾用户的屏幕阅读器使用。正如 Lokin 所说,维护网站对残障和残疾用户的可用性也应该是开发时需要关注的问题。