悬停图像时是否可以隐藏标题？答案

【问题标题】：Is it possible to hide title when hovering image?悬停图像时是否可以隐藏标题？
【发布时间】：2012-06-30 17:48:35
【问题描述】：

这是我的代码：

<img src="image.jpg" alt="" title="some title" />

当我悬停该图像时，会出现“某个标题”。可以隐藏吗？

【问题讨论】：

您不想删除它吗？如果你不想在悬停时显示它，你什么时候使用标题？
你试过了吗？要永久删除标题吗？
我使用 jQuery 从图像中获取标题并将其显示在图像上。那我就不需要悬停了。
你为什么要这样做？标题是为此目的而制作的，如果您想向标签添加自定义属性，请编写类似 data-title="some title" 或使用 alt 属性
@Onheiron 我想我会选择你的解决方案（数据标题而不是标题），尽管这里有 5 个很好的答案 :) 谢谢！

标签： javascript jquery image html css

【解决方案1】：

不，不是真的。但您可以将其替换为 JavaScript，或者将其留空。

jQuery 示例：

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

【讨论】：

【解决方案2】：

删除title 属性很简单，但“隐藏它”是不可能的（据我所知）；为了删除标题，以下应该可以工作，尽管目前未经测试：

$('img').hover(
    function(){
        $(this).data('originalTitle',$(this).title());
        $(this).removeAttr('title');
    },
    function(){
        $(this).attr('title',$(this).data('originalTitle');
    });

在上面我选择移动属性，然后在鼠标移出时替换它。

永久删除title：

$('img').removeAttr('title');

参考资料：

【讨论】：

感谢您的解决方案。它显然有效，我可以使用它，但我认为我会使用 data-title="" 代替其他答案之一。这对我来说更有意义，因为我使用 jQuery 在图像顶部打印标题标签。

【解决方案3】：

是的！使用 jQuery，您可以在鼠标悬停时将其删除并在鼠标悬停时再次添加 -

$(function(){
  var ttext;
  $('img').hover(function(){
    ttext = $(this).attr('title');
    $(this).removeAttr('title');
  },
  function(){
    $(this).attr('title', ttext);
  });
});

【讨论】：

感谢您的解决方案！它显然有效，但我决定改用 data-title 属性。其他答案让我相信，在我的情况下这是更好的方法。

【解决方案4】：

您可以将其移至图像数据...并返回。就这样

$('img').hover(
  function () {
    $(this).data('title',$(this).attr('title')).removeAttr('title');
  }, 
  function () {
    $(this).attr('title',$(this).data('title'));
  }
);

【讨论】：

感谢您的解决方案！它显然有效，但我决定改用 data-title 属性。其他答案让我相信，在我的情况下这是更好的方法。

【解决方案5】：

在 Stack Overflow 上，五个人可以同时给出相同的答案，有点搞笑：P

$(function(){
    $('img').hover(function(){
        $(this).removeAttr('title');
    }, function(){
        $(this).attr('title','some title');
    });
});

【讨论】：

是的，我刚刚发布了这个问题，两分钟后同时出现了 5 个答案:) 每个都是一样的。

【解决方案6】：

正如一些答案所指出的那样，这很容易做到，但是知道你想对标题做什么，我会使用 data-* 自定义属性或使用 .data() 附加标题

<img src="image.jpg" alt="" data-title="some title" />

或

$('img').data('title', 'some title');

【讨论】：

是的，我会选择这个解决方案，因为它最适合我的需求，尽管这个问题的每个答案都同样好 :) 我只是认为将它移到数据更有意义 -标题而不是在悬停时隐藏原始标题 =“”。谢谢！

【解决方案7】：

我至少在 Chrome 上尝试并使用了 jQuery / jQuery UI：

创建您希望（和不希望）有标题的对象。
所有这些项目都存在后，添加工具提示。
浏览所有您不希望工具提示以通常方式显示的项目，并将工具提示设置为''。

我的代码中的示例，在命名的 HTML 元素可用后发生：

jQuery(document).tooltip();
for(var index = 0; index < sites.length; ++index) {
    jQuery('#' + sites[index][0]).attr('title', '');
}

【讨论】：

【解决方案8】：

如果只是悬停问题，您可以在图片上设置pointer-events: none;，它会解决问题。

【讨论】：