CSS Hover 1 Div Affects Other non-Child Divs

Question

Here is some mock code. Basically I have no control over the table elements ONLY the div's inside the td's. I need to be able to hover over any of the div's in the row and they all hover to the same state. Can this be done?

Fiddle: https://jsfiddle.net/sthompson/0nzszu10/

HTML:

<table>
  <tr>
    <td>
      <div class="row1 one">

      </div>
    </td>
    <td>
      <div class="row1 two">

      </div>
    </td>
    <td>
      <div class="row1 three">

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

CSS:

.one {
  background-color: #0000FF;
  width: 200px;
  height: 30px;
}

.two {
  background-color: #ff0000;
  width: 200px;
  height: 30px;
}

.three {
  background-color: #00FF00;
  width: 200px;
  height: 30px;
}


/*.one:hover, .two:hover, .three:hover {
  background-color: #000;
}*/

.row1:hover {
  background-color: #000;
}

So hovering over any of the div .one .two. three would all hover to the row1:hover state. Hope that states it better. — Steve Thompson, Jan 28 '16 at 18:58

score 3 · Accepted Answer · edited May 23 '17 at 11:52

In CSS there is no parent selector yet. Therefore, you can't do this directly.

However, you can try using :hover on the nearest common ancestor:

tr:hover .row1 {
  background-color: #000;
}

.one {
  background-color: #0000FF;
  width: 200px;
  height: 30px;
}
.two {
  background-color: #ff0000;
  width: 200px;
  height: 30px;
}
.three {
  background-color: #00FF00;
  width: 200px;
  height: 30px;
}
tr:hover .row1 {
  background-color: #000;
}

<table>
  <tr>
    <td>
      <div class="row1 one"></div>
    </td>
    <td>
      <div class="row1 two"></div>
    </td>
    <td>
      <div class="row1 three"></div>
    </td>
  </tr>
</table>

Note it's not exactly the same: if you hover the border between two cells, they will change color even if you aren't hovering any .row1.

score 0 · Answer 2 · answered Jan 28 '16 at 19:02

I don't think that's possible using just CSS, given that you have no control / access whatsoever to the table or tr above. If you do have some access (or can say for sure that the divs will be wrapped in a tr, try this code:

(basically, put a rule on the grandfather tr)

tr:hover > td > div {
  background-color: black;
}

https://jsfiddle.net/zbqzu21r/

Weird idea:

You have the parent tr which you cannot control. Try making a table and nesting it inside the td. I'm assuming you can easily control anything done on this table. So, put your selectors on this table, and be done with it.

<tr>
  <td>
    <table class="mytable">
      <tr>
         <td><div class="row1 one"></div></td>
      </tr>
      <tr>
         <td><div class="row1 two"></div></td>
      </tr>
      <tr>
         <td><div class="row1 three"></div></td>
      </tr>
    </table>
  </td>
</tr>

CSS:

.mytable:hover tr > td > .row1 {
  background-color: black;
}

CSS Hover 1 Div Affects Other non-Child Divs

2 Answers2