0

こちらを参照してください。ロールオーバーした画像のサムネイルに関係なく、画像のプレビュー/ツールチップを同じ位置に配置したいのですが、これを機能させることができません。インラインCSSを使用して絶対位置に設定することができましたが、ホバーしたサムネイルに応じて、その位置が変わります。

これが私のjsfiddleです： http://jsfiddle.net/FsPSZ/

プレビュー画像を A​​LL 3 の 1 つの決定された位置にとどめる方法を誰かが説明できれば、それは素晴らしいことです。

編集:私がここに求めているものを正確に投稿してくれたtuffに感謝します: http://jsbin.com/ogutiv/1/edit質問は、どうすればこれをアニメーション化できますか? CSS3 と Opacity トランジションを試みましたが、うまく動作しませんでした。ありがとう。

4

2 に答える 2

2

OK、ツールチップの位置をそれぞれのサムネイルに対して固定する必要があるのか​​、それともすべてのツールチップを単一の固定位置に表示する必要があるのか​​ はわかりません。

いずれの場合も、JS はすべてカーソルに対する位置を計算するためのものなので、JS なしで実行できます。

これは、サムネイルに対して固定位置にツールチップを表示するデモです: http://jsbin.com/ogutiv/2/edit

これは、すべてのサムネイルのコンテナーに対して単一の固定位置にツールチップを表示するデモです: http://jsbin.com/ogutiv/1/edit

于 2012-10-05T18:34:05.867 に答える
0

このようなものを使用してください

$("#img").mouseover(function(){
$(this).css("postion","absolute");
})

$("#img").mouseout(function(){
$(this).css("postion","relative");
})
于 2012-10-05T18:11:25.007 に答える