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

HTML and 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;
}

<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>

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 4 · 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 1 · Answer 2 · edited Oct 01 '22 at 17:50

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.

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

<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 Hover 1 Div Affects Other non-Child Divs

2 Answers2