将 div display:table 属性的整行悬停

Question

我想悬停包含 div 单元格的整行。

主要 div 具有 display:table 属性。

我正在尝试 css3 伪类第 n 次 child 但无法正常工作。

任何想法将不胜感激，谢谢。

div.table{
 margin:auto;
    display:table;
    width:800px;
    background-color:lightblue;
    border-collapse:collapse;
}
div.row
{
    display:table-row;
}

div.cell
{
    display:table-cell;
    border:1px solid red;
    height: 20px;
    padding: 4px;
    border:none;
    border-bottom: 1px solid #333;
}
div.cell:nth-child(8){
    border-right: 1px solid #333;
}
div.cell:nth-child(1){
    border-left: 1px solid #333;
}
div.cell:hover ~ div:nth-child(1n)
{
    background-color: #B38E8E;
}

<div class="table">
    <div class="row">
        <div class="cell">NAME</div>
        <div class="cell">GENDER</div>
        <div class="cell">STATUS</div>
        <div class="cell">CITIZENSHIP</div>
        <div class="cell">TIN</div>
        <div class="cell">SSS</div>
        <div class="cell">PHIL. HEALTH</div>
        <div class="cell">ACTION</div>
    </div>
    <div class="row">
        <div class="cell">ROW 1 Data</div>
        <div class="cell">ROW 1 Data</div>
        <div class="cell">ROW 1 Data</div>
        <div class="cell">ROW 1 Data</div>
        <div class="cell">ROW 1 Data</div>
        <div class="cell">ROW 1 Data</div>
        <div class="cell">ROW 1 Data</div>
        <div class="cell">ROW 1 Data</div>
    </div>
    <div class="row">
        <div class="cell">ROW 2 Data</div>
        <div class="cell">ROW 2 Data</div>
        <div class="cell">ROW 2 Data</div>
        <div class="cell">ROW 2 Data</div>
        <div class="cell">ROW 2 Data</div>
        <div class="cell">ROW 2 Data</div>
        <div class="cell">ROW 2 Data</div>
        <div class="cell">ROW 2 Data</div>
    </div>
</div>

Answer 1

以下是您需要的东西。将鼠标悬停在行上而不是单元格上。

div.table{
 margin:auto;
    display:table;
    width:800px;
    background-color:lightblue;
    border-collapse:collapse;
}
div.row
{
    display:table-row;
}

div.cell
{
    display:table-cell;
    border:1px solid red;
    height: 20px;
    padding: 4px;
    border:none;
    border-bottom: 1px solid #333;
}
div.cell:nth-child(8){
    border-right: 1px solid #333;
}
div.cell:nth-child(1){
    border-left: 1px solid #333;
}
div.row:hover 
{
    background-color: #B38E8E;
}

<div class="table">
    <div class="row">
        <div class="cell">NAME</div>
        <div class="cell">GENDER</div>
        <div class="cell">STATUS</div>
        <div class="cell">CITIZENSHIP</div>
        <div class="cell">TIN</div>
        <div class="cell">SSS</div>
        <div class="cell">PHIL. HEALTH</div>
        <div class="cell">ACTION</div>
    </div>
    <div class="row">
        <div class="cell">ROW 1 Data</div>
        <div class="cell">ROW 1 Data</div>
        <div class="cell">ROW 1 Data</div>
        <div class="cell">ROW 1 Data</div>
        <div class="cell">ROW 1 Data</div>
        <div class="cell">ROW 1 Data</div>
        <div class="cell">ROW 1 Data</div>
        <div class="cell">ROW 1 Data</div>
    </div>
    <div class="row">
        <div class="cell">ROW 2 Data</div>
        <div class="cell">ROW 2 Data</div>
        <div class="cell">ROW 2 Data</div>
        <div class="cell">ROW 2 Data</div>
        <div class="cell">ROW 2 Data</div>
        <div class="cell">ROW 2 Data</div>
        <div class="cell">ROW 2 Data</div>
        <div class="cell">ROW 2 Data</div>
    </div>
</div>

Answer 2

这样试试Demo

使用此代码

div.row:hover
{
    background-color: #B38E8E;
}

而不是

div.cell:hover ~ div:nth-child(1n)
{
    background-color: #B38E8E;
}

Answer 3

在您的样式表中添加以下样式并尝试。

.row:hover{
    background-color: #B38E8E;
}

将 div display:table 属性的整行悬停

hover the entire row of the div display:table properties

html

css

hover