鼠标悬停标题属性

时间:2010-12-19 01:58:08

标签: attributes hide lightbox title

我曾尝试在这里查看这个问题的许多不同答案并尝试使用他们的解决方案,但它似乎没有用,例如这个解决方案: Is it possible to hide href title?

我的问题是,当用户将鼠标悬停在图片上时,我是如何隐藏标题属性工具提示的?我尝试使用<span title=" ">text</span>,但它只导致标题工具提示显示空格或跨度的标题属性。

这是我的website

5 个答案:

答案 0 :(得分:7)

我找到了问题的答案。谢谢Gert G让我入门! =]

我为了隐藏title属性所做的是首先将所有内容放入循环中,否则,它将获取第一个链接的标题并将其应用于点击的图片:

$("a[rel='portfolio']").each(function(e) {

}

然后,我声明了一个变量,其中包含您希望它们应用于的任何元素的标题:

var title = $(this).attr("title");

一旦我声明了变量,我就创建了一个函数,当它被鼠标悬停时隐藏标题,然后在我鼠标移开时添加标题(为了拥有我的灯箱,ColorBox)。

$(this).mouseover(
        function() {
            $(this).attr('title','');
        }).mouseout(
            function() {
            $(this).attr('title', title);
    });

为了在点击时查看标题,您必须添加另一个功能:

$(this).click(
        function() {
            $(this).attr('title', title);
            }
        );

总而言之,它看起来像这样:

$("a[rel='portfolio']").each(function(e) {
    var title = $(this).attr('title');
    $(this).mouseover(
        function() {
            $(this).attr('title','');
        }).mouseout(
            function() {
            $(this).attr('title', title);
    });
    $(this).click(
    function() {
        $(this).attr('title', title);
        }
    );
});

我希望这有助于其他所有人寻找类似或完全正确的解决方案!

您可以查看更改here

答案 1 :(得分:1)

感谢Abriel提供的解决方案,我已将其转换为YUI 3,以下是代码以防任何人需要它

YUI().use('node', function(Y) { 
    Y.all("a[rel='portfolio']").each(function(node) {
        var title = node.get('title');
        node.on('mouseover', function(ev) {
            ev.target.set('title', ev.target.get('text'));
            ev.target.on('mouseout', function(e) {
                e.target.set('title', title);
            })
        })
        node.on('click', function(ev) {
            ev.target.set('title', title);
        })
    })
})

答案 2 :(得分:1)

我一直在寻找一个jquery解决方案,但我正在使用一个适合我的JavaScript解决方案。我需要&#34;标题&#34;属性传递有关产品/图像的描述性信息,并且在该描述性信息中,存在所需的基本html标记。因此,只要有人将鼠标移到图像上,就会弹出这种混合代码和描述。这不太理想,所以我使用以下代码,以便&#34;标题&#34;在鼠标悬停期间隐藏信息,但标题信息仍然可用于点击。

在链接代码中添加此内容!希望这有助于某人:

onclick=\"javascript: this.title='description and or html goes here' ;\" 
onMouseOver=\"javascript: this.title='' ;

干杯!

答案 3 :(得分:0)

它的作品如下:

1:创建您自己的属性并从灯箱调用

<a href="www.website.com" stitle="hello">click me</a>

2:将jquery文件中的title属性重命名为:

getAttribute('stitle')

答案 4 :(得分:0)

我将它用于我的工具提示,但即使没有它也应该可以使用它。

我将链接和标题嵌套在其中。比嵌入式图像我写了title =“”(用那个空格)。

<a href="http://myweb.com" class="tooltip" id="facebook" title="Sing up to my Newsletter"
<img title=" " src="../img/email.png" alt="email icon" width="32">
</a>

当我将鼠标悬停在我的电子邮件图标上时,没有显示标题。