CODEWITHSUNDEEP
htmlcsshover
Aristeo Espiritu
Aristeo Espiritu

Reputation: 23

hover the entire row of the div display:table properties

I would like to hover the entire row that contain div cell.

The main div has display:table properties.

Im trying css3 pseudo classes nth child but not working properly.

Any idea would be appreciated, thanks.

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>

Upvotes: 2

Views: 2639

Answers (3)

stanze
stanze

Reputation: 2480

Add the below styles in your stylesheet and try.

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

Upvotes: 0

G.L.P
G.L.P

Reputation: 7207

Try like this Demo

Use this code 

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

instead of 

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

Upvotes: 1

ketan
ketan

Reputation: 19341

Following is the thing you need. Hover on row not on cell.

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>

Upvotes: 0

Related Questions