Jquery＆CSS - 重叠divs

  • Z时代
  • 2024-01-10
  • 分类：问答

我想创建一个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"})}) 
});

回答：

可能解决这个是添加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; 
}

回答：

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

的z索引和相对定位应该工作： http://jsfiddle.net/robertp/y48BD/

我与JavaScript除去z索引操作和使用的：悬停状态改变z索引代替：

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

我希望这是你一直以来的事情。

以上是 Jquery＆CSS - 重叠divs 的全部内容， 来源链接： utcz.com/qa/265534.html

回到顶部