CSS - Table - TH hover set TD visibility

Question

This seems like it should be straight forward, and I've searched high and low for an answer.

Things to note:

I'm attempting to make a menu system. Eventually I'd like to hover a TH to show the TDs below.
I can't use Class/ID/Name due to limitations (markdown)
I can only use HTML, CSS, and LESS
I can't use Javascript or jQuery

I've tried this in a variety of ways, but the code below is a basic example of what I'm attempting to accomplish.

table th:nth-child(1):hover { 
    color: red;
    > td:nth-child(1) { color: red; } 
}
table th:nth-child(2):hover { 
    color: red;
    + td:nth-child(2) { color: red; } 
}
table th:nth-child(3):hover { 
    color: red;
    td:nth-child(3) { color: red; } 
}

<table>
<thead><tr><th>Menu 1</th><th>Menu 2</th><th>Menu 3</th></tr></thead>
<tbody>
<tr>
<td>menu 1 item</td>
<td>menu 2 item</td>
<td>menu 3 item</td>
</tr>
</tbody>
</table>

When hovering over a a TH, I'd like something to apply to the TD.

Any assistance would be greatly appreciated!

With the HTML structure you've presented (typical table structure), this cannot be accomplished with pure CSS. You can only use `:hover` to affect elements that follow the initial element at the same hierarchy level or a deeper one. Because of that, hovering your `` elements could only affect other elements that come later in the same `` container unless you use JavaScript. — Jon Uleis, May 21 '18 at 18:04

score 1 · Answer 1 · answered May 21 '18 at 18:07

1

If the elements are siblings you can use + or ~ but in your case, it seems like they don't have any relationship so you might want to use JS

The question is similar to On a CSS hover event, can I change another div's styling?

answered May 21 '18 at 18:07

shivani tiwari

60
5

Thank you. I can't use JS, but this referenced question helped me understand that I could at least do it from td(a) to td(b). – pepperhat May 21 '18 at 18:24

score 0 · Answer 2 · answered May 21 '18 at 18:05

0

Since the td elements are not inside the th elements and the th elements are not at the same level as the tds, what you want can't be done with just CSS. Your only choices would either be some type of JS solution or redoing your markup to use divs so that you can mimic the table appearance/behavior but control the hierarchy so that the available CSS selectors will work.

answered May 21 '18 at 18:05

dukedevil294

1,285
17
31

Thanks, this is likely what I'll have to do. I appreciate the info! – pepperhat May 21 '18 at 18:36

score -1 · Answer 3 · answered May 21 '18 at 18:24

Unfortunately, you won't be able to do this with CSS alone. I created a simple script that can handle adding active classes to the th and corresponding td:

$(document).ready(() => {
  $('th').hover( (e) => {
    const index = $(e.target).index();
    $(e.target).toggleClass('active-row');
    const activeCell = $('tbody td')[index];
    $(activeCell).toggleClass('active-cell');
  });
});

.active-row {
  color: red;
}
.active-cell {
  color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <thead>
    <tr>
      <th>Menu 1</th>
      <th>Menu 2</th>
      <th>Menu 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>menu 1 item</td>
      <td>menu 2 item</td>
      <td>menu 3 item</td>
    </tr>
  </tbody>
</table>

Thanks for the information. Unfortunately, I cannot use JS. – pepperhat May 21 '18 at 18:31 — pepperhat, May 21 '18 at 18:31

score -1 · Answer 4 · answered May 21 '18 at 18:55

-1

$(document).ready(function() {
  $('.table td').hover(function() {
      var t = parseInt($(this).index()) + 1;
      $('.table td:nth-child(' + t + ')').addClass('highlighted');
    },
    function() {
      var t = parseInt($(this).index()) + 1;
      $('.table td:nth-child(' + t + ')').removeClass('highlighted');
    });
});

.highlighted {
  color: blue;
  font-weight:bold;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table">
  <tbody>
    <tr>
      <td width="25%">A</td>
      <td width="25%">B</td>
      <td width="25%">C</td>
    </tr>
    <tr>
      <td>apple</td>
      <td>banana</td>
      <td>grapes</td>
    </tr>

    <tr>
      <td>apple1</td>
      <td>banana1</td>
      <td>grapes1</td>
    </tr>

    <tr>
      <td>apple2</td>
      <td>banana2</td>
      <td>grapes2</td>
    </tr>
  </tbody>
</table>

answered May 21 '18 at 18:55

Roshni Jain

11
1

We can achieve it by using a simple logic in JS/Jquery.And can give CSS accordingly. – Roshni Jain May 21 '18 at 18:57
It could be really helpful to provide some level of explanation to accompany your code to explain why you proposed what you did. – Collin Barrett May 21 '18 at 19:00
Here I am taking var t for targetting the columns vertically,Table column indexing start from 0 .So,I am adding ($(this).index()) + 1; and parsing it into the integer.Suppose If I am hovering on A i.e.first column's first row,then it will target the 1st column of the table.(0)+1. – Roshni Jain May 21 '18 at 19:18
1

RoshniJain, I guess @CollinM.Barrett meant to add the explanations inside your answer. Anyway, OP can't use jQuery or Javascript. – Takit Isy May 21 '18 at 19:21

Takit Isy · Answer 5 · 2018-05-22T07:12:29.530

As far as I know, there is no solution if you can't use Javascript or jQuery.

⋅ ⋅ ⋅

Anyway, if you could modify your html structure to be able to use the direct sibling selector,
(I know that it won't be a typical table structure anymore…)
and add some styling, you could achieve that kind of result:

table {
  border-collapse: collapse;
  border: 0px solid black;
  padding: 0;
}

table th, table td {
  width: 120px;
  background: #ddd;
  text-align: center;
}

table td {
  display: none;
  position: absolute;
  transform: translate(-100%, 100%);
  background: #eee;
}

table th:hover+td,
table td:hover {
  display: block;
}

table th:hover, table td:hover {
  color: red;
}

<table>
  <tbody>
    <tr>
      <th>Menu 1</th>
      <td>menu 1 item</td>
      <th>Menu 2</th>
      <td>menu 2 item</td>
      <th>Menu 3</th>
      <td>menu 3 item</td>
    </tr>
  </tbody>
</table>

I hope it helps.

Please explain why the downvote. The ones who are using jQuery, which isn't permited are not downvoted… I don't use jQuery and I'm been downvoted! I'd like to understand! — Takit Isy, May 21 '18 at 19:13
I didn't downvote your answer, but it might be due to the modification of the table structure. I cannot remove my TH from the THEAD and place it in the TBODY. — pepperhat, May 21 '18 at 19:39

CSS - Table - TH hover set TD visibility

5 Answers5