AlexG AlexG - 1 month ago 7
CSS Question

Hovering in a table to affect a header

I'm not sure if this is even possible to accomplish without JavaScript, but it would be preferable.

This is kind of what my page looks like:

____________________________
| TITLE | |This is a fixed header. I want "TITLE"
|----------------------------| |to be the name of the row, and I want it
| _______ _______ ___| |to show when I hover over one of the
| | | | | | | |image rows.
| | | | | | | |
| |_______| |_______| |___| | [The boxes are the images.]
| _______ _______ ___| |
|__|_______|__|_______|__|___| |




header {
background: #FFFFFF;
position: fixed !important;
width: 100%;
height: 85px;
top: 0;
left: 0;
text-align: left;
font-size: 30px;
border: 1px solid black;
}

body {
padding-top: 100px;
/*equal to the height of your header */
}

r1n {
width: 200px;
height: 200px;
display: inline;
}

r1n:hover {
display: none
}

table tr:hover ~ header r1n {
display: none
}

<header>

<r1n>TITLE_NAME</r1n>
</header>

<body>
<table>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
</tr>
</table>
</body>





Is there a CSS method/trick to make the fixed header show the row's name?
Maybe by concealing a bunch of divs in the header and displaying them depending on which row the cursor is on?

**EDIT:

@Andrew Bone: check post for an actual answer to my question. (using CSS.)

@Dekel: check post for the method I'll end up using. (using JavaScript.)

Answer

I see lots of people saying this isn't possible, it is though I would never suggest you use it in practice.

Here is an example:

body {
  margin: 0;
}
table {
  margin: 18px 0 0 0;
  position: relative;
  border: 1px solid black;
}
tr:nth-child(even) {
  background: #DDD;
}
tr:nth-child(odd) {
  background: #FFF;
}
tr:hover {
  background: tomato;
}
tr[header]:hover:after {
  content: attr(header);
  position: absolute;
  top: -19px;
  left: -1px;
  border: 1px solid black;
  border-bottom-width: 0px;
  width: 100%;
}
td {
  padding: 5px 15px;
}
<table>
  <tr header="Header 1">
    <td>a</td>
    <td>b</td>
    <td>c</td>
    <td>d</td>
  </tr>
  <tr header="Header 2">
    <td>a</td>
    <td>b</td>
    <td>c</td>
    <td>d</td>
  </tr>
  <tr header="Header 3">
    <td>a</td>
    <td>b</td>
    <td>c</td>
    <td>d</td>
  </tr>
  <tr header="Header 4">
    <td>a</td>
    <td>b</td>
    <td>c</td>
    <td>d</td>
  </tr>
</table>

I've added a header attribute to each tr also I've added a pseudo element, this pseudo element puts some content, which in this example is taken from the header attribute thanks to attr(header), and positions it where we want it in relation to the parent, table, just like that we have some code that works and is JS free. But honestly, use JS if you can :-)

Hope this helps.

EDIT:

Here's a pure javascript solution

const trSel = document.querySelectorAll("tr[header]");
for (let i = 0; i < trSel.length; i++) {
  trSel[i].addEventListener("mouseover", function(evt) {
    let headSel = trSel[i].parentElement.parentElement.parentElement.querySelector(":scope > .header");
    headSel.innerHTML = trSel[i].getAttribute('header');
  });
}
body {
  margin: 0;
}
.header {
  padding: 5px 0;
}
tr:nth-child(even) {
  background: #DDD;
}
tr:nth-child(odd) {
  background: #FFF;
}
tr[header]:hover {
  background: tomato;
}
td {
  padding: 5px 15px;
}
<div>
  <div class="header">
    Placeholder!
  </div>
  <table>
    <tr header="Table 1 Row 1">
      <td>a</td>
      <td>b</td>
      <td>c</td>
      <td>d</td>
    </tr>
    <tr header="Table 1 Row 2">
      <td>a</td>
      <td>b</td>
      <td>c</td>
      <td>d</td>
    </tr>
    <tr header="Table 1 Row 3">
      <td>a</td>
      <td>b</td>
      <td>c</td>
      <td>d</td>
    </tr>
    <tr header="Table 1 Row 4">
      <td>a</td>
      <td>b</td>
      <td>c</td>
      <td>d</td>
    </tr>
  </table>
</div>

<h2>
Wild second table appeared
</h2>

<div>
  <div class="header">
    Placeholder!
  </div>
  <table>
    <tr header="Table 2 Row 1">
      <td>a</td>
      <td>b</td>
      <td>c</td>
      <td>d</td>
    </tr>
    <tr header="Table 2 Row 2">
      <td>a</td>
      <td>b</td>
      <td>c</td>
      <td>d</td>
    </tr>
    <tr header="Table 2 Row 3">
      <td>a</td>
      <td>b</td>
      <td>c</td>
      <td>d</td>
    </tr>
    <tr header="Table 2 Row 4">
      <td>a</td>
      <td>b</td>
      <td>c</td>
      <td>d</td>
    </tr>
  </table>
</div>

It uses the same principles, but now it's actually updating the text so when you move your mouse away it can keep the last selected row. It works with multiple tables too.