是否可以隐藏href标题？

Question

<a href="link.html" title="Titletext">

...是代码。

由于 slimbox，我需要使用 title 属性，但我想要隐藏将鼠标悬停在链接上时显示的标题文本。

有什么想法吗？

Answer 1

一个简单的怎么样：（

<a href="link.html" title="Titletext"><span title=" ">text</span></a>

更好的是，在嵌套标题中添加一些实际有用的内容。）

Answer 2

假设您在 a 标签中使用图像标签，则可以为图像使用替代标题（甚至是空格），当您将鼠标悬停在链接上时，该标题将覆盖链接的标题。

Answer 3

使用 jQuery 这真的很容易，

$("li.menu-item > a").attr('title', '');

它将从 li 类菜单项的任何 a 元素中删除标题 - 当然，您可以很喜欢，所以它们只需将鼠标悬停在上面即可隐藏:)

Answer 4

关于我在几个网站上看到的“一个简单的好主意怎么样”的建议，我个人不会建议这样做，原因有两个。

1. 屏幕阅读器和视障用户依赖大声朗读的标题属性。我相信这是它们在锚标签中的最初目的和原因，也是美国政府 Web 可访问性第 508 节的一个重要方面。我认为在这种情况下，屏幕阅读器会阅读所有标题；第一个，然后是第二个，这可能会让视障用户感到非常困惑。他们不明白为什么他们会听到两个特别是如果它包含不同的文本。他们听到的是两个不同的主播吗？如果是这样，为什么他们不能单击或选择他们听到的另一个并继续只获得一个网页（作为一种场景）。

2. 如果您在两个标题的 Google 和许多其他搜索引擎中都放置其他文本，则可能会将此操作视为黑帽 seo，并可能导致您的网站被该搜索引擎列表禁止（又称填充），这种情况发生在德国的宝马身上谷歌已经。

我个人认为最好的方法是保留 title 属性，因为它应该起作用，然后使用 Javascript 或 css 以某种方式隐藏它。这些方法对屏幕阅读器、网络爬虫和视障用户没有影响。

Answer 5

我喜欢 jquery...;) 我需要这个来制作作品集：灯箱的标题标签，但鼠标悬停时没有标题标签。这对我有用，感谢您的提示！

$(function(){
    $("li.menu-item > a").hover(function(){
        $(this).stop().attr('title', '');},
        function(){$(this).stop().attr();
        });
});

Answer 6

// 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 在我的评论中链接到问题的第一个骗子的回答（禁用链接和 上的浏览​​器工具提示）

Answer 7

您不必将 title 属性与 Slimbox 一起使用。请参阅本页顶部附近的多个图像示例：http://code.google。 com/p/slimbox/wiki/MooToolsAPI。

您只需从锚点中删除 title 属性，然后将 title 文本（图像的描述）传递给 Slimbox open 函数即可将使用锚点的 onclick 事件进行调用。

Answer 8

最简单的方法是：

使用 slimbox 后，在其下方添加以下代码：

$('*[title]').removeAttr('title');

希望它能有所帮助..

Answer 9

不能保证，但根据 Slimbox 的工作方式，您也许可以包含标题，然后使用 jQuery 等在页面加载几秒钟后将其删除。假设 Slimbox 索引了 Title 属性并在读入后将其存储在某个位置，那么您可以在发生这种情况后安全地删除它。

Answer 10

用空的 jQuery 工具提示覆盖/覆盖它？

Answer 11

如果您使用jquery，您可以执行以下操作

$("a").mouseover(function(e){ preventdefault();} );

（但尚未测试）

Answer 12

难道你不能循环遍历 DOM 中的链接并将 title 属性设置为空字符串吗？

var DOMlinks = document.links;
for(i=0;i<DOMlinks.length;i++){
DOMlinks[i].title = ""
}

Answer 13

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

Answer 14

利用 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'))
});

Answer 15

这是我的 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'));
});

Answer 16

正如在另一个问题上所读到的那样，我建议将“标题”属性切换为某些“数据标题”，以便残疾用户的屏幕阅读器可以使用它。正如洛金所说，保持网站对受损和残疾用户的可用性也应该是开发时需要关注的问题。