3

ユーザーが画像をホバーするとコンテンツが表示されるときに、派手なホバー効果を作ろうとしています。ホバーバブルを画像の中央に配置したい。

このフィドルに示されています：http://jsfiddle.net/sandrodz/TnEMU/

これは、ホバー時に自動的に display:inline に変更されるスパンが Firefox とは異なる動作をする chrome では特に問題です。両方をブロック要素として配置すると役立ちますが、非表示の要素はパンであり、自動的に display:inline を取得します。この問題を修正し、ホバーを正しい画像の上に直接表示する方法について何か考えはありますか?

ありがとう！

4

2 に答える 2

1

そこに行きます（あなたのコードで）

CSS変更点:

#features_icons li span {
    top:0; /* ///added to fix in chrome ///*/
    left:0;/* ///added to fix in chrome///*/
    white-space:nowrap;/* ///added this line/// */
}
#features_icons li {
    position:relative;  /* ///added this line/// */
}

そして、追加したばかりのjquery内に:outerWidth(true)正しい寸法を取得するには:

spanW = ($(this).next("span").outerWidth(true) / 2) - ($(this).outerWidth(true) / 2);

また、試すこともできます: すべての<SPAN>要素
を別の方法で削除します:

jsFiddle デモ

どのような場合でも、アイコンには alt 属性が必要です... では、各画像に SPAN テキストを付与しない理由はありません: (どの CMS エディターでも、画像にalt. 説明テキストを追加できます。)

<img alt="Air Conditioning" src="http:conditioning.png" />


したがって、すべてのスパンを削除して、<body>タグの後にこれを追加できます。

<div id="tooltip"></div>

私のスクリプトを使用します：

$("ul#features_icons li img").hover(function() {
           var altText = $(this).attr('alt');
           var thisW2   = $(this).outerWidth(true) / 2;
           var thisPosL = $(this).offset().left + thisW2;
           var thisPosT = $(this).offset().top;
           
           $('#tooltip').text(altText);
           var toolW2 = $('#tooltip').outerWidth(true) / 2; // after it's filled with text
           $('#tooltip').stop(1).fadeTo(200,1).css({left: (thisPosL-toolW2) , top:thisPosT});
    }, function() {
        $('#tooltip').fadeTo(100,0,function(){
           $(this).hide();
        });
    });
  • アイコンの位置を計算します
  • altテキストをつかむ
  • #tooltipテキストで埋める
  • ツールチップの幅を取得する
  • 位置#tooltip
  • そしてそれを見せてください！

PS: CSS で名前を変更しました:#features_icons li span {に#tooltip{

于 2012-07-11T22:36:53.817 に答える
0

これが私の見解ですhttp://jsfiddle.net/XrTZg/30/

imgの前にスパンを移動しました。不要な余白を削除しました（インラインcss + cssファイルにまたがっています）。

スパンを作成しdisplay: absolute;ました。親要素を基準にして配置したかったので、に設定#features_icons liしましたdisplay: relative;。

また、JSでスパンの上下のオフセットを修正しました。

于 2012-07-11T22:42:43.457 に答える