0

だから私はjqueryプラグインのfancyboxを使用していて、うまくいきましたが、少し調整する方法を知りたいです。だからここに私のhtmlがあります：

<a id="pics" title="This is some text that displays" href="Images/test.jpg">
<img alt="pics" src="Images/test.jpg"/></a>

そして、ここに私のjqueryがあります:

$("a#pics").fancybox({
    openEffect : 'elastic',
    openSpeed  : 150,
    closeEffect : 'elastic',
    closeSpeed  : 150,
    closeClick : true,
    helpers : {
        title : {
            type : 'over'
        }
    }
});

そのため、画像をクリックすると、画像の上にテキストが表示されます。これは素晴らしいことです。良くないのは、画像の上にカーソルを合わせると、すべてのタイトル テキストがカーソルの横に表示されることです (タイトル属性がそれを行うことはわかっています)。しかし、上記のhtml/jqueryコードを変更して、すべて同じものを表示するだけで、そのツールチップがホバー時に表示されないようにする方法はありますか?

4

1 に答える 1

4

アンカーのタイトル属性の内容を含む小さなツールチップを表示するのは、ブラウザーの動作です。
ツールチップがブラウザに表示されないように、別の属性を使用できます。これを試してください。

<a id="pics" caption="This is some text that displays" href="Images/test.jpg">
<img alt="pics" src="Images/test.jpg"/></a>

ファンシーボックスのオプション:

$("a#pics").fancybox({
    openEffect : 'elastic',
    openSpeed  : 150,
    closeEffect : 'elastic',
    closeSpeed  : 150,
    closeClick : true,
    beforeLoad: function() {
        this.title = $(this.element).attr('caption');
    }
    helpers : {
        title : {
            type : 'over'
        }
    }
});

fancybox で実際の例を見ることができます。

于 2012-10-01T13:14:58.653 に答える