Geek Answers Handbook

Highlight two table rows when hovering with CSS

Changing the background color of a row in a table on hover is pretty simple with CSS:

.HighlightableRow:hover
{
  background-color: lightgray;
}

And some HTML:

<table>
  <tr class=HighlightableRow>
    <td>Cell 1</td>
    <td>Cell 2</td>
    <td>Cell 3</td>
  <tr>
  <tr class=HighlightableRow>
    <td>Cell 1</td>
    <td>Cell 2</td>
    <td>Cell 3</td>
  <tr>
</table>

Sometimes I want to highlight a couple of lines when I hover over any of them. For example, when displaying a list of work orders in the table, I will have one line with the creator, date of creation, urgency, etc., And the second line will be with the exception of the requested work.

Is there any way other than using the onmouseover / onmouseout JavaScript event handlers to create an effect like the one shown above? CSS is preferred.

+5
source share
3 answers

This is pretty easy to do if you are content with highlighting the next line.

tr:hover, tr:hover + tr {
background:#eee; }

css + , . , , .

. jsFiddle

, , , " ". , , . ?

EDIT: -

HTML

<table>
     <tr>
       <td>

         <table>

           <tr>
             <td>Hello</td>
             <td>World!</td>
           </tr>

           <tr>
             <td>Hello</td>
             <td>World!</td>
           </tr>

         </table>

       </td>
     </tr>
   </table>

CSS

tr:hover tr { background:#eee; }

fiddle

+9

tbody .

tbody:hover { background:#eee;}

HTML:

<table>
  <tbody>
    <tr>
      <td>Hello</td>
      <td>World!</td>
    </tr>
    <tr>
      <td>Hello</td>
      <td>World!</td>
    </tr>
  </tbody>
</table>

"tbody", "thead" "tfoot" .

+14

I don’t know how to make events on one object interact with another object in vanilla CSS. Typically, when you want to hook up such custom events, you are stuck using some kind of actual logical programming language (in this case javascript).

Now, if you decide to go this route, I can help you with the very simple jQuery do exactly what you need :). The jQuery event binding model actually takes a lot of pain from javascript.

+1
source

More articles:


All Articles