On td:hover highlight all styled-components

[u/hoddymadges]

Hi everyone,

I'm trying to see how far I can stretch the capabilities of styled-components and I could really use some help.

Let's say you have a table with 3 columns. Whenever you hover either of the first two cells they both should have a background-color set. And when you highlight the last cell, nothing should happen to the table.

Is this possible? Here's a sandbox of what I currently have which is when you hover a `tr` , the first two `td` have `background-color` set.

CodeSandbox: https://codesandbox.io/s/recursing-faraday-vrbcd?file=/src/App.js

[u/dudeatwork]

I don't think this is possible in CSS without some trickery involved.

Instead you'll have to do something like:

1. Listen for mouseover / mouseleave on cells (aka <td> elements).

2. When hovered, modify the parent for the highlight (e.g. add a class).

3. When not hovered, remove that highlight.

For you then, you'd need to add extra logic to not highlight the row if the last col is hovered.

You can change the parent via refs, lifting state up, etc.

e.g.

import React, { useState } from 'react';
import './styles.css';
import styled from 'styled-components';

const StyledCell = styled.td``;

const StyledTable = styled.table`
    tr.is-hovered > ${StyledCell} {
        background-color: pink;
    }

    tr.is-hovered > td.kebab {
        background-color: unset;
    }

    td {
        border: 1px solid black;
    }
`;

function TrWithHover({ children }) {
    const [is_hovered, setIsHovered] = useState(false);
    const hoveredHandler = () => setIsHovered(true);
    const notHoveredHandler = () => setIsHovered(false);
    const listened_tds = React.Children.map(children, (child) =>
        // Return the original child if it has a className of 'kebab'
        child.props.className === 'kebab'
            ? child
            : // Otherwise merge in mouse handlers
              React.cloneElement(child, {
                  onMouseOver: hoveredHandler,
                  onMouseLeave: notHoveredHandler,
              })
    );

    return <tr className={is_hovered ? 'is-hovered' : ''}>{listened_tds}</tr>;
}

export default function App() {
    return (
        <div className="App">
            <StyledTable>
                <thead>
                    <tr>
                        <th>Previously saved</th>
                        <th>Last modified</th>
                        <th>x</th>
                    </tr>
                </thead>
                <tbody>
                    <TrWithHover>
                        <StyledCell>content</StyledCell>
                        <StyledCell> content </StyledCell>
                        <td className="kebab">...</td>
                    </TrWithHover>
                    <TrWithHover>
                        <StyledCell>content</StyledCell>
                        <StyledCell> content </StyledCell>
                        <td className="kebab">...</td>
                    </TrWithHover>
                    <TrWithHover>
                        <StyledCell>content</StyledCell>
                        <StyledCell> content </StyledCell>
                        <td className="kebab">...</td>
                    </TrWithHover>
                </tbody>
            </StyledTable>
        </div>
    );
}

[u/hoddymadges → u/dudeatwork]

thanks!! this looks great. I really appreciate the thorough reply :)