Question

css div 重叠显示问题

如图，我想用html+css来实现：当我的鼠标第一个div的时候，就能完全显示第一个div；当我把鼠标移到下面的div的时候，我想让第二个div完全显示，第一个此时不完全显示（充分i额的部分显示第二个div）以此类推。请问该如何实现？望指点一二，谢谢。

Answer 1

css的hover就能实现（但不兼容IE6，因为IE6不支持a标签以为的hover，想兼容ie6需要用js）
首先需要用的position设置绝对或相对位置然后用z-index设置层叠高度（数越大越在最上面，可以为负数）
然后当hover时将其z-index的值改的很大就可以了
JS同理
这里指提供思路，具体怎么写可以好好研究研究有助于你的提高
纯手动望采纳

追问

hover用的不熟，能给个样式代码吗？麻烦了!

追答

a {background:#f00;z-index:10}/*鼠标不划过时的背景色和z轴高度*/
a:hover {background:#f60;z-index:999;}/*鼠标划过时的背景色和z轴高度*/

Answer 2

css
<style>
#cover1,#cover2,#cover3{
width: 300px;
height: 300px;
position: absolute;
}
#cover1{ background: #096; z-index: 1; top: 10px; left: 10px; }
#cover2{ background: #3CF; z-index: 2; top: 150px; left: 150px; }
#cover3{ background: #F3C; z-index: 3; top: 300px; left: 300px; }
#cover1:hover, #cover2:hover, #cover3:hover{
z-index: 100;
}
</style>

html
<div id="cover1">1</div>
<div id="cover2">2</div>
<div id="cover3">3</div>

Answer 3

仅用css似乎办不到吧 因为css只能控制他以下的内容 控制不了同级的内容
css结合js吧
祝你好运
修改div的z-index数值就行了

Answer 4

用绝对定位，点击修改z-index的值就可以了，我js不行，但是css凑活，只知道原来，但是估计写不出来

Answer 5

前面两位都已经说出了方法，我就简单说z-index的取值

设置时，一开始可给每个div 设置 z-index:1; 当哪个div需要完全显示时，这个div 的 z-index 直接为2就好了，其余的需要再次设置为 1；