Question

<style>
#table{
    display:table;
}   
#table div.row{
    display:table-row;
}
#table div.row div{
    display:table-cell;
    width:100px;
    text-align:right;
}
#table div.row:first-child{
    color:white;
    background-color:blue;
}
#table div.row:last-child{
    color:white;
    background-color:green;
}

#table div.row:last-child{
    display:none;
}
#table div.row:hover{
    display:table-row;
}
</style>

<div id='table'>
    <div class='row'>
        <div>CELL</div><div>CELL</div><div>CELL</div>
    </div>
    <div class='row'>
        <div>CELL</div><div>CELL</div><div>CELL</div>
    </div>  
</div>

我无法摆脱我的任务，在那里，我们将制作一个2行的表，在默认视图中只有一行，因为最后一行是隐藏的（显示：无），然后当你将鼠标悬停时鼠标在表格第二行会出现，我不知道我的CSS有什么错误？你认为这行CSS是我错误的来源吗#table div.row：hover {display：table-row ;谢谢你告诉我。

here is my fiddle

Answer 1

然后当您将鼠标悬停在表格中时，第二行将会出现

那么为什么不这样做：

#table:hover .row:last-child {
    display:table-row;
}

我还建议你只使用table tags。它不会带来额外的麻烦，并提供更好的监督。

jsFiddle

Example with the table tags

Answer 2

#table div.row:hover + div.row:last-child{
    display:table-row;
}

这会奏效。 Refer

Answer 3

您也可以使用

#table:hover div.row:last-child {
    display:table-row;
}

Answer 4

当鼠标进入#table时，您需要活动事件。我知道你问的是css，但如果你愿意的话，我提出了一个javascript选项：

JS

    $("#table")
    .mouseenter(function() {
        $(this).find("div.row:last-child").css({'display':'table-row'});
    })
    .mouseleave(function() {
        $(this).find("div.row:last-child").css({'display':'none'});
    });

您的示例中有一个link to jsFiddle。

在css中显示和隐藏div行

4 个答案:

jsFiddle