0

ホバー状態の div をアイソトープ要素 (画像のサムネイル) の上に表示しようとしています。

私は他のdivの上にそれを取得することができましたが、この特定のdivではありません。

jsfiddle は私が今どこにいるかを正確に示しており、以下の jquery はホバー効果のために実行しているスクリプトです。

isotope.min.js ファイルの修正版を使用して、コンテナーに追加されていた相対位置を削除しています。

jsfiddle

http://jsfiddle.net/rwone/nvtCW/

脚本

$(".magic").hover(
function () {
console.log($(this).position().top);
$(this).find('.hidden_db_data_div')
.css({'left':$(this).position().left+40 + "px" + "!important", 'top':'-50px'}).fadeIn(500);

},
function() { 
$(this)
.find('.hidden_db_data_div')
.fadeOut(100);
}                
);

ありがとうございました。

4

1 に答える 1

2

ああ、Z インデックスの魔法。時間ができたら、最終的にそれらを読んでください。このすべての偽物がどのように機能するかは本当に魅力的です。

あなたの問題は、ホバーされていないボックスが、ホバー時に表示されるボックスの上にあるということです。

簡単に言うと、ホバリングされた周囲の要素をより高い z-index に配置します。

$(".magic").hover(
  function () {
    $(this)
      .css('z-index', '999') // This Line - Gives the element a high z-index
      .find('.hidden_db_data_div') 
      .css({'left':$(this).position().left+40 + "px" + "!important",'top':'-50px'}).fadeIn(500);
  },
  function() { 
    $(this)
      .css('z-index', '') // And this line - Gets rid of the inline z-index again.
      .find('.hidden_db_data_div')
      .fadeOut()
  }                
);

編集：ああ、私がそれをしている間、JSFiddleが機能しています： http://jsfiddle.net/nvtCW/10/

于 2012-11-15T08:52:48.797 に答える