Question

我想悬停包含div cell的整行。

主div有display：table属性。

我正在尝试css3伪类第n个孩子，但没有正常工作。

任何想法都会受到赞赏，谢谢。

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

Answer 1

尝试这样 Demo

使用此代码

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

而不是

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

Answer 2

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

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 3

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

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

悬停div显示的整行：表格属性

3 个答案: