请查看此代码片段:http://codepen.io/anon/pen/JItLa
我试图显示两行方块,每行方块数量不同。鼠标悬停事件应该会显示 CSS 阴影,但是出现了一个问题:阴影的右边框与下一个方块重叠。 你可能会说这里的解决方案是使用 display:inline-block 来留出方块之间的间隙,但我不需要这些间隙。这些方块应该黏在一起,但右侧阴影应该在悬停时覆盖到下一个方块上。
html,
body {
margin: 0;
padding: 0
}
.wrapper {
width: 100%;
margin-top: 20px
}
.tile,
.tile2 {
float: left;
background: #f2f2f2
}
.tile {
width: 25%
}
.tile2 {
width: 33.3%;
border-left: 1px solid #ddd
}
.tile:hover,
.tile2:hover {
-webkit-box-shadow: 0 0 2px rgba(255, 255, 190, .75), 0 0 23px 1px #000;
-moz-box-shadow: 0 0 2px rgba(255, 255, 190, .75), 0 0 23px 1px #000;
box-shadow: 0 0 2px rgba(255, 255, 190, .75), 0 0 23px 1px #000
}
.header {
padding: 20px 0px 10px;
text-align: center
}
.clear {
clear: both
}
<div class="wrapper">
<div class="tile">
<div class="header">some text</div>
</div>
<div class="tile">
<div class="header">some text</div>
</div>
<div class="tile">
<div class="header">some text</div>
</div>
<div class="tile">
<div class="header">some text</div>
</div>
<div class="clear"></div>
</div>
<div class="wrapper">
<div class="tile2">
<div class="header">some text</div>
</div>
<div class="tile2">
<div class="header">some text</div>
</div>
<div class="tile2">
<div class="header">some text</div>
</div>
<div class="clear"></div>
</div>
怎么可能实现呢?
这里还有另一个问题:当我在块之间添加边框时,最后一个块移到了下一行,这是不好的。请参见上面给出的示例中的第2行。
z-index
属性仅适用于DOM中定位的元素。至于原因,我只能猜测是因为该元素不存在于三维空间中,因为它没有被定位。因此,z-index
没有任何效果。 - Josh Crozier