Question

我试图将悬停状态div显示在同位素元素上方（图像缩略图）。

我设法让它高于其他div但不是这个特殊的div。

jsfiddle显示我到底的确切位置，下面的jquery是我为悬停效果运行的脚本。

我正在使用isotope.min.js文件的修改版本来删除正在添加到容器中的一些相对定位。

的jsfiddle

脚本

$(".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);
}                
);

谢谢你。

Answer 1

啊，z-index的魔力。当你有时间的时候，最后去看看他们。这真是一件非常有趣的事情。

我理解正确，你的问题是没有悬停的盒子在悬停时出现的盒子上方，是吗？

长话短说，将悬停的周围元素置于更高的z指数中。

$(".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/

如何强制悬停状态div的z-index使其出现在同位素元素之上？

1 个答案: