Question

嗨，我是这个人的新手所以请耐心等待:)。

我希望title属性在图片上hover时看不到，此图片是图片库的一部分，因此点击图片并获取“弹出窗口”{{1必须恢复属性才能显示信息。

我设法停止使用title进行悬停，但是如果我点击该图片，<pre>onmouseover="this.title='';"</pre>属性内容就不会显示在“弹出窗口”中。以下是该网站的链接：http://lieblingskuchen-potsdam.de/lieblingskuchen-tartes.html

我绝对不知道如何管理这个。

感谢您的帮助。

安雅

PS：抱歉，我没有设法在这里发布部分HTML代码（抱歉我是新的）

Answer 1

this.title=''  //it clear the title value

因为您清除title属性中的值。因此，请将标题存储在其他变量中，例如自定义 data-* 属性。因此，当您点击时，您可以使用它。

这是一个简短的例子：

HTML：

<p title="CLICK" data-att=''>asasas</p>

JS：

$('p').on('hover', function () {
    $(this).data('att', this.title)
    this.title = '';
});

$('p').on('click', function () {
    this.title = $(this).data('att');
alert(this.title);    
});

JSFIDDLE

Answer 2

我在Fancybox中使用了这个，它滥用了＆＃39;标题＆＃39;弹出的大图下标题缩略图下的链接属性。在$（document）.ready（）事件中，我把：

// Workaround on stupid Fancybox 'feature' that the 'title' attribute is abused for text under picture,
// so links make hover title look like rubbish.
// http://stackoverflow.com/questions/20717849/hide-title-attribute-on-mouseover-but-show-onclick-imagegallery

$('div.center').on('hover', function () {
  var title = $(this).find('a.viewimage').attr('title');
  if (!$(this).data('att') && title) {
     $(this).data('att', title);  // set original title in data
     $(this).find('a.viewimage').attr('title',title.replace(/<\/?[^>]+(>|$)/g, "")); // set hover title stripped from tags
console.log($(this).find('a.viewimage').attr('title'));    
  }
});

$('div.center').on('click', function () {
     $(this).find('a.viewimage').attr('title',$(this).data('att'));  // restore original title with tags
     $(this).data('att', ''); // clear title in data
console.log(this.title);    
});

还有一个小问题：当点击向右或向左（浏览大图片）时，先前显示html标签剥离标题的图像，因为没有点击缩略图。

在我的astrophoto网站上查看我的示例：

http://skysurfer.eu/skypics1.php

在鼠标悬停时隐藏标题属性，但显示onclick（Imagegallery）

2 个答案: