Question

我有一个 li 网格，所有网格都悬浮在一起，有一个固定的宽度/高度。问题是，当我将鼠标悬停在中心的最新产品上时，显示的div不位于顶部，位于下一个 li的

下面

EDIT /突破：如果我删除相对li上的z-index，这适用于除IE7之外的所有浏览器

Answer 1

尝试更改悬停的LI的z-index以使其大于其兄弟姐妹，就像在productOver函数中一样：

function productOver(){
  var product_html = $(this).find(".product_html");
  // Generate HTML only on first hover.
  if(product_html.data("generated") != true){
    var tis = $(this);
    product_html.find(".name").html(tis.find("h2").html());
    product_html.find(".price").html(tis.find(".price").html());
    product_html.data("generated", true);
  }
  $(this).css('z-index','10'); //add this
  product_html.stop().fadeTo('fast', 1).show();
}

然后将其设置回productOut上的默认值

function productOut(){ 
  $(this).css('z-index', '8'); //add this
  $(this).find(".product_html").stop().fadeTo('slow', 0, function() {
    $(this).hide(); 
  });
}

Answer 2

将z-index: 1;放在底行LI和更高的z-index上，悬停时出现的所有元素。这应该让你开始。

CSS相对和绝对，忽略z-index

2 个答案: