show and hide div row in css

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>

I cant get rid off to my assignment, where in, we will make a 2 rows of table where in the default view is only one row, because the last row was hidden (display:none), then when you hover the mouse in the table the second row will appear, I don’t know what is the error of my CSS?, do you think this line of CSS is the source of my error #table div.row:hover{ display:table-row;}, thank you for expaining me.

here is my fiddle

score 5 · Accepted Answer · edited Jun 20 '20 at 09:12

5

then when you hover the mouse in the table the second row will appear

So why not do that:

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

Also i would suggest to just use the table tags. It doesn't bring extra troubles with them and gives a much better oversight.

jsFiddle

Example with the table tags

edited Jun 20 '20 at 09:12

Community

1
1

answered Nov 21 '13 at 08:02

nkmol

8,025
3
30
51

yeah! I notice that .row is the same of div.row – Robert John Concepcion Nov 21 '13 at 08:13
Yea :) In your example every `.row` is a div. It is not neccesary and it will only slow the selector down when you specify the element :) – nkmol Nov 21 '13 at 08:15
thanks again master nkmol, ahh out of my question, what do u call this in css +(plus sign)? thanks – Robert John Concepcion Nov 21 '13 at 08:21
@RobertJohnConcepcion It's called a Adjacent sibling selector. `This selector allows you to select an element that is directly after another specific element.` Here a good article about selectors: http://css-tricks.com/child-and-sibling-selectors/ – nkmol Nov 21 '13 at 08:23

score 2 · Answer 2 · edited May 23 '17 at 12:28

2

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

This will work. Refer

edited May 23 '17 at 12:28

Community

1
1

answered Nov 21 '13 at 08:04

goutham2027

98
4

can you explain what is that plus + sign thank you sir goutham2027 – Robert John Concepcion Nov 21 '13 at 08:11

score 1 · Answer 3 · answered Nov 21 '13 at 08:06

1

You can also use

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

answered Nov 21 '13 at 08:06

Bindiya Patoliya

2,726
1
16
15

score 0 · Answer 4 · answered Nov 21 '13 at 08:08

0

You need the event actives when mouse enter inside #table. I know you are asking with css, but I made a javascript option if you would use it:

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

Here you have a link to jsFiddle with your example.

answered Nov 21 '13 at 08:08

newpatriks

581
1
4
23

sorry im too noob I cant handle that script :-( – Robert John Concepcion Nov 21 '13 at 08:10
Don't worry, in fact, is much better css than js, it's faster. So you are right! =) – newpatriks Nov 21 '13 at 08:13

show and hide div row in css

4 Answers4

jsFiddle