JQuery & CSS - Перекрывающиеся divs

Question

Я пытаюсь создать expnd divs при наведении указателя мыши на JQuery и CSS. 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 в дивы , это позволит работать z-index.

Если вы не сделаете этого, дивы обязательство к 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 будет работать, если вы хотите использовать это вместо этого, но вам нужно указать, где именно вы хотите разместить divs.

Обновлено ваша скрипка: http://jsfiddle.net/ua444/1/

Вы уже имели класс на этих дивах так что единственное изменение:

.inner {  
    position: relative; 
} 

Answer 2

Я раздвоенный и обновил свою скрипку.

Z-индекс и относительное позиционирование должно работать: http://jsfiddle.net/robertp/y48BD/

я удалил манипуляции Z-индекс от JavaScript и используется: парить состояние, чтобы изменить Z-индекс вместо:

.inner { 
    ... 
    position: relative; 
    } 

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

Надеюсь, это то, за чем ты был.