2

このページ：

http://thegoodgirlsnyc.com/index.html?page=about

ユーザーがチームメンバーの名前をロールオーバーすると、ツールチップが表示されます。残念ながら、ユーザーがテキストを直接表示していない場合は、テキストが点滅します。点滅が発生しないように、ターゲット領域をテキストの周囲のより広い領域に拡大する方法はありますか？

4

5 に答える 5

5

テキストをdivに入れて、パディングします。次に、.hoverイベントをテキストではなくdivに配置します。

問題は、によって引き起こされるアクチュレイ.toolTipTextです。divは、ホバーされているテキストの途中でオーバーレイされています。これは、添付のスクリーンショットで確認できます。 ここに画像の説明を入力してください

私の解決策はこのようなものになります。

<div class='hoverable'>
    <span>The text</span>
    <div class='tooltip' style='display:none;'>The tooltip crap</div>
</div>

このようなjQueryを使用します

$(".hoverable").hover(function(){
    $(this).find("div.tooltip").show();
},function(){
    $(this).find("div.tooltip").hide();
});

次に、 div.tooltipに対して相対的に座っているようにスタイルを設定します。.hoverable

于 2011-07-11T15:58:36.163 に答える
3

それがあなたがリンクしたあなたのウェブページであると仮定すると、テキストはすでに彼ら自身のスパンに含まれているので、私はdivのような余分なマークアップを入れません。代わりに、それぞれにパディングを追加するだけです。スタイリングのために追加の要素を導入するよりもはるかにセマンティックであり、ホバーイベントを変更する必要はありません。span

編集：主な問題は、ツールチップが以前のスパンのように右側ではなく中央に表示されるように設定されていることです。これにより、ツールチップdivがテキストの半分を切り取ります。

これを修正するには、すべてのAboutTeamLinksのjavascriptを変更します。

からshowToolTip('#lRG', '#dRG', 10, 'center');

にshowToolTip('#lRG', '#dRG', 10, 'right');

これにより、ツールチップが名前の中央ではなく末尾に表示されるため、ツールチップdivが停止してテキストが半分になります。

于 2011-07-11T16:09:05.540 に答える
0

ツールチップを表示したり、アンカーにパディングを適用したりする前に、多少の遅延が発生する可能性があります。これにより、基本的にホバー領域が増加します。

于 2011-07-11T15:58:44.697 に答える
0

要素の幅/高さを増やすか、より大きなサイズの別々の要素でそれらをラップしてから、それらのラッパーにホバーイベントを設定することができます。後者をお勧めします。

于 2011-07-11T16:00:00.393 に答える
0

これはCSSの作業です。display: block;要素にを追加して、を追加できるようにする必要がwidthありheightます。私の選択はaddpaddingであるため、要素の幅と高さを変えることができます。ただし、最初にブロックを表示する必要があります。

于 2011-07-11T16:04:18.023 に答える