2

我有一个类似下面的链接，我想防止在鼠标悬停事件时显示它的标题属性。但我必须保留它，我不能删除它。

<a href="" title="This is a test">Test</a>

我如何使用 jQuery 来做到这一点？

4

6 回答 6

3

很多次之后，无意中找到了一个可以解决问题的链接。所以我决定把它放在这里......
感谢它的作者

http://jsfiddle.net/vkDcG/

HTML：

<a class="fancybox" caption="This is 1st title" href="http://fancyapps.com/fancybox/demo/1_b.jpg"><img src="http://fancyapps.com/fancybox/demo/1_s.jpg" alt=""/></a>

<a class="fancybox" caption="This is 2nd title" href="http://fancyapps.com/fancybox/demo/2_b.jpg"><img src="http://fancyapps.com/fancybox/demo/2_s.jpg" alt=""/></a>

jQuery：

$(".fancybox")
    .attr('rel', 'gallery')
    .fancybox({
        beforeLoad: function() {
            this.title = $(this.element).attr('caption');
        }
    });
于 2013-03-10T19:39:46.627 回答
1

Stack Overflow 上有一些 hack（禁用工具提示，抑制工具提示）。我认为这是最干净的，它不需要 jQuery：

https://stackoverflow.com/a/457382/1325290

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

如果您不想要它，请忽略 if...suppress 部分。

于 2012-05-19T20:32:59.633 回答
0

我唯一的想法是防止鼠标悬停事件表单被触发。可能这个解决方案会起作用：

$("a[title='Titlte is a test']").mouseover(function(e) {
    e.preventDefault();
});

如果这对您没有帮助，那么您可以使用一些不透明元素放置在您的元素上来破解它 - 这实际上会做同样的事情 - mouseover eventet 不会被触发。注意：你应该在链接上触发点击事件，当它被不透明元素捕获时：

$("Opacity element id").click(function(e) {
    $("a[title='Titlte is a test']").click()
});

如果使用了 mousedown/up 事件，它们也类似

于 2012-05-19T20:33:27.880 回答
0

该技术是在 mouseove 上隐藏标题并在 mouseout 时恢复。

$("a#test").mouseover( function(e){

    var myLink = $('a#test');

    myLink.hover(
        function() {  
            old_title = $(this).attr('title');      
            $(this).attr('title',''); 
        },
        function() {  
            $(this).attr('title', old_title);  
        }  
    );  
});
于 2012-05-19T20:36:42.300 回答
0

这是我使用现代 jQuery 的解决方案：

jQuery(document.body)
  .on('mouseover', 'a[title]', null, function(event) {
    $(this).attr('data-title', $(this).attr('title')).removeAttr('title');
  })
  .on('mouseout', 'a[data-title]', null, function(event) {
    $(this).attr('title', $(this).attr('data-title')).removeAttr('data-title');
  });

这会处理页面上所有现有和未来的 a-tags，并导致非常小的内存开销，因为它只为所有元素创建一对事件处理程序 - 在悬停时，它将值从title属性移动到data-title属性，当鼠标离开元素时，它会再次删除它。

于 2013-01-20T16:20:48.560 回答
0

对我来说，我不在乎标题标签的内容是什么，所以这对我来说更干净。我已经做了：

$('a').hover(function() {

    $(this).attr('title', '');

});

这阻止了标题标签的显示。

于 2015-05-13T10:40:00.300 回答