Jquery & CSS - 重叠的 div

Question

当用户将鼠标悬停在 Jquery 和 CSS 上时，我正在尝试创建一个 expnd div。 我的 jsFiddle 在 Opera 浏览器中运行良好，但在 Chrome 中，当我将框“B”悬停并返回框“A”时，这与框“B”重叠。怎么解决？。这是我的代码块：

HTML：

<div id="box">
    <div class="inner" id="01">
        <a href="#" class="block">
            <span id="s01" class="s01">A</span>
        </a>
    </div>
    <div class="inner" id="02">
        <a href="#" class="block">
            <span id="s02" class="s01">B</span>
        </a>
    </div>
</div>

CSS：

body {

    background-color:navy;
}
#box {
    height: 92px;
    _height: 92px; 
    width: 290px;
    _width: 270px;
    float: left;
    margin-left: 9px;
    margin-top: 48px;
    margin-bottom: 31px;
    margin-right: 26px;
    background-color: #FFF;
    _overflow:hidden;
}
.inner {
    height: 90px;
    width: 141.6px;
    _width: 121.6px;
    background-color: #FFFFFF;
    float: left;
    padding-top: 0px;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    font-size: 16px;
    color: #2DA2A8;
    cursor: pointer;
    z-index:0;
}
.s01 {
    text-align: center;
    display: block;
    height:100%;
    cursor: pointer;
    padding-top: 36px;
}
.block {
    color:#399;
}

JS：

$(document).ready(function(){


    $("#01").mouseover(function(){$(this).css({
      transition:"all 1s",transform:"scale(1.2)","z-index":"2",
      "background-color":"#24C9C4","border-top":"solid 1px white",
       "border-bottom":"solid 1px white"})})

     $("#01").mouseout(function(){$(this).css({
       transition:"all 1s",transform:"scale(1.0)","z-index":"0",
        "background-color":"#FFF","border-top":"none",
         "border-bottom":"none"})})


     $("#02").mouseover(function(){$(this).css({
      transition:"all 1s",transform:"scale(1.2)","z-index":"2",
      "background-color":"#24C9C4","border-top":"solid 1px white",
       "border-bottom":"solid 1px white"})})

     $("#02").mouseout(function(){$(this).css({
       transition:"all 1s",transform:"scale(1.0)","z-index":"0",
        "background-color":"#FFF","border-top":"none",
         "border-bottom":"none"})})

});

Answer 1

可能解决此问题的最巧妙方法是将position:relative 添加到 div，这将使z-index 能够工作。

如果您不这样做，则 div 将默认为 position:static，而忽略 z-index，请参阅：Why is z-index ignored with position:static?

这里有更多信息，解释了为什么它在 Opera 中工作但在 Chrome 中不工作：http://yagudaev.com/posts/getting-reliable-z-index-cross-browser/

position:absolute 如果您想改用它，也可以使用，但您需要准确指定要放置 div 的位置。

更新了你的小提琴：http://jsfiddle.net/ua444/1/

你已经在这些 div 上有了一个类，所以唯一的变化是：

.inner {    
    position: relative;
}

Answer 2

我已经分叉并更新了你的小提琴。

z-index 和相对定位应该可以工作： http://jsfiddle.net/robertp/y48BD/

我从 JavaScript 中删除了 z-index 操作，并使用 :hover 状态来更改 z-index：

  .inner {
    ...
    position: relative;
  } 

  .inner:hover {
    z-index: 1;
  }

我希望这是你一直在追求的东西。