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-index 的魔力。当你有时间时，最终去阅读它们。所有这些虚假的工作方式真的很有趣。

我理解正确，您的问题是非悬停框位于悬停时出现的框上方，是吗？

长话短说，将悬停的周围元素放在更高的 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 回答