CODEWITHSUNDEEP
jqueryhtmlcss
Carl Edwards
Carl Edwards

Reputation: 14454

Applying a specific css property to a child element while hovering on its previous sibling

I'm trying to create a table that when you hover on one row it changes its background and bottom border color. Additionally I'd like to apply that same border color to its immediate sibling. Is there a way that this can be done using solely CSS?

HTML

<table>
 <tbody>
  <tr>
   <td>Row 1</td>
  </tr>
  <tr>
   <td>Row 2</td>
  </tr>
  <tr>
   <td>Row 3</td>
  </tr>
 </tbody>
</table>

CSS

table {width: 100%;}

tr {border-top: 1px solid #e6e6e6; height: 40px;}

tr:hover {border-top: 1px solid #cadaee;}

tr:first-child {border-top: none;}

Upvotes: 2

Views: 76

Answers (3)

Ram kumar
Ram kumar

Reputation: 3162

Check this fiddle. This code running properly and what you expected. http://jsfiddle.net/webdevkumar/3bmmc/

Upvotes: 0

Carl Edwards
Carl Edwards

Reputation: 14454

table {width: 100%;}

tr {border-top: 1px solid #e6e6e6; height: 40px;}

tr:hover {border-top: 1px solid #cadaee; height: 40px; background: #ebf4ff;}

tr:hover + tr {border-top: 1px solid #cadaee;} /* Property that's applied to sibling */

tr:first-child {border-top: none;}

Upvotes: 0

Josh Crozier
Josh Crozier

Reputation: 241098

You can use the adjacent sibling selector, +.

jsFiddle example

tr:hover + tr {
    border-top: 1px solid #cadaee;
    height: 40px;
    background: #ebf4ff;
}

If you want both elements to be selected on :hover, use something like this instead:

jsFiddle example

tr:hover + tr, tr:hover {
    border-top: 1px solid #cadaee;
    height: 40px;
    background: #ebf4ff;
}

Upvotes: 1

Related Questions