Jquery& CSS - 重叠div [英] Jquery & CSS - Overlapping divs
问题描述
我试图创建一个expnd div,当用户鼠标悬停Jquery和CSS。
我的 jsFiddle 可在Opera浏览器中正常工作,但在我悬停时进入Chrome框B并返回框A,这与框B重叠。如何解决呢?这是我的代码块:
I'm trying to create a expnd divs when user mouse over with Jquery and CSS. My jsFiddle works great into Opera Browser but into Chrome when i hover the box "B" and return to box "A" this is overlaped by the box "B". How to solve it?. Here's my code block:
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
到divs,这将使 z-index
工作。
Probably the neatest way to solve this is to add position:relative
to the divs, this will enable z-index
to work.
如果不这样做,divs默认为 position:static
,它忽略 z-index
,请参阅:为什么是z -index ignored with position:static?
If you don't do this, the divs are defaulted to position:static
which ignores z-index
, see: Why is z-index ignored with position:static?
这里有更多的信息,它解释了为什么它在Opera而不是Chrome中工作: http://yagudaev.com/posts/getting-reliable-z-index-cross-browser/
There is more information here, which explains why it works in Opera but not Chrome: http://yagudaev.com/posts/getting-reliable-z-index-cross-browser/
position:absolute
会运作,如果你想使用它,
position:absolute
would work as well if you wanted to use that instead, but you would need to specify exactly where you want the divs to be placed.
更新了你的小提琴: http://jsfiddle.net/ua444/1/
您已经在这些div上有一个类,所以唯一的变化是:
You already had a class on those divs so the only change is:
.inner {
position: relative;
}
这篇关于Jquery& CSS - 重叠div的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!