jquery - z-index 悬停在不工作

Question

我正在尝试创建一个不会影响其余布局的悬停事件。 z-index 似乎是这样做的方法，但我无法让它工作。我试图坚持使用 css，但 jQuery 是可行的。

完整应用:http://jsfiddle.net/9cRdq/

html

<div class="big-square" id="br">
    <div class="little-square" id="br-tl"></div>
    <div class="little-square" id="br-tr"></div>
    <div class="little-square" id="br-bl"></div>
    <div class="little-square" id="br-br"> </div>
</div>

CSS

.big-square
{
    position: relative;
    z-index: 1;
    font-size: 2em;
    float: left;
    width: 30%; 
    min-width: 4em;
    min-height: 4em;
    margin: 0 2% 2% 0;
    background: #000;
}
.little-square
{
    position: relative;
    z-index: 1;
    cursor: pointer;
    float: left;
    width: 48%; 
    height: 48%;
    background: #cd2626;
}
.little-square:hover
{
    z-index: 1000;
}

j查询

$(document).ready(resizeBigSquare);
window.onresize = resizeBigSquare;
function resizeBigSquare() {
    $('.big-square').css(
        {
            'height': ($('.big-square').width() * .85) + 'px',
            'line-height': ($('.big-square').width() * .85) + 'px'
        });
    $('.little-square, .rectangle-top, .rectangle-bottom').css(
        {
            'line-height': $('.little-square').height()+ 'px'
        });
}

Answer 1

悬停时您的 z-index 更改工作正常。事实上，here's a fiddle这表明它通过使用 box-shadow 工作。当鼠标悬停在 div.little-square 上时，您的 div.little-square 实际上高于它的同行，否则 box-shadow 会夹在其他人的后面。

请注意，z-index 只会影响 z 轴上的堆叠顺序，不会影响其他(大小、颜色等)

如果您希望在悬停时更改 div.little-square 的大小(不破坏网格)，请考虑在每个正方形内创建一个子元素。然后，将 position:absolute 应用于新的子元素，将小方 block 的一些属性传递给它，并相应地设置其悬停状态的样式。 This fiddle有一个我在说什么的例子。