Jquery＆CSS - 重疊divs

我想創建一個expnd divs，當用戶將鼠標懸停在Jquery和CSS上時。我的jsFiddle偉大的Opera瀏覽器，但進入Chrome時，我懸停框「B」，並返回框「A」這是由框「B」重疊。如何解決它？這裏是我的代碼塊：Jquery＆CSS - 重疊divs

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"})}) 

});

來源

2013-12-17 V.Salles

不知道它適用於哪種版本的Opera，但在Chrome（31.0.1650.63）和Opera（18.0.1284.68）中，B都與我重疊。重疊是預期的行爲雖然 – robertp

@heartcode我的Opera版本是12.15生成1748. –

可能解決這個是添加position:relative到div的最巧妙的方法，這將啓用z-index工作。

如果你不這樣做，是的div默認爲position:static而忽略z-index，請參閱：Why is z-index ignored with position:static?

這裏有更多的信息，這可以解釋爲什麼它工作在Opera，但沒有鉻：http://yagudaev.com/posts/getting-reliable-z-index-cross-browser/

position:absolute也可以，如果你想用它來代替，但你需要明確指定你想要放置div的位置。

更新您的提琴：http://jsfiddle.net/ua444/1/

您已經對這些div一類，因此唯一的變化是：

.inner {  
    position: relative; 
}

來源

2013-12-17 11:43:56

謝謝，它工作正如我所料。 –

我分叉和更新你的小提琴。

的z索引和相對定位應該工作： http://jsfiddle.net/robertp/y48BD/

我與JavaScript除去z索引操作和使用的：懸停狀態改變z索引代替：

.inner { 
    ... 
    position: relative; 
    } 

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

我希望這是你一直以來的事情。

來源

2013-12-17 11:47:55 robertp

不知道爲什麼，但在他對div「A」的迴應需要更長時間來覆蓋div「B」時，我認爲我應該在javascript中保留z-index。不管怎樣，謝謝。 –

Jquery＆CSS - 重疊divs

回答

相關問題