Question

我有这样的结构：

<div class='row'>
    <div class='cell'>aaaa</div>
    <div class='cell'>bbbb</div>
    <div class='cell'>cccc</div>
</div>
<div class='row'>
    <div class='cell'>dddd</div>
    <div class='cell'>eeee</div>
    <div class='cell'>ffff</div>
</div>

使用相关的样式表：

.cell {
    z-index: 1;
    position: relative;
    float: left;
    width: 82px;
}

.cell:hover {
    z-index: 10;
    position: relative;
    width: 100px;
}

row {
    clear: left;
    position: relative;
    z-index: 1;
}

我只是简单地将光标上方的div调整大小，保持固定其余div的结构。谢谢！

Answer 1

您需要将该课程用于row。

如果您将css中的班级从row更改为.row：

的 Live demo 的

类必须以.开头，例如.anyname

使用css
中的<div class="james"></div>访问类（使用HTML）.james 使用CSS中的<div id="james"></div>访问
ID（以html为单位）#james

Answer 2

尝试在悬停的细胞上设置-18px的负右边距（100-82 = 18）：

.cell:hover {
    z-index: 10;
    position: relative;
    width: 100px;
    margin-right: -18px;
}

Working example

z-index不适用于浮动div

2 个答案: