Highlight table row under cursor with Pure CSS

Asked

Viewed 964 times

2

I created a very simple HTML table with 4 lines and 4 columns and used the Pure CSS to make her more beautiful.

Then, I wanted the table row to be highlighted when the user hovers over that row. All I had to do was add the code below the tag <head>: 

  <style>
  tr:hover {background-color: #ffff99;}
  </style>

The problem is that only the blank lines in the table are being highlighted. The lines that were gray, because of Pure CSS, remain gray.

Would anyone have any suggestions on how I change the code so that the lines are highlighted when I hover over, both the blank lines and the gray lines?

Follow the full code:

<html>
<head>
    <link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/pure-min.css">
    <style>
        tr:hover {background-color: #ffff99;}
    </style>
    <title>Table</title>
</head>
<body>
    <h1>Table</h1>

    <table class="pure-table pure-table-striped">
        <tr>
            <td>A1</td>
            <td>B1</td>
            <td>C1</td>
            <td>D1</td>
        </tr>
        <tr>
            <td>A2</td>
            <td>B2</td>
            <td>C2</td>
            <td>D2</td>
        </tr>
        <tr>
            <td>A3</td>
            <td>B3</td>
            <td>C3</td>
            <td>D3</td>
        </tr>
        <tr>
            <td>A4</td>
            <td>B4</td>
            <td>C4</td>
            <td>D4</td>
        </tr>
    </table>
</body>
</html>
html css

  • tried to use tr:hover { background-color: #ffff99 !important; }?

1 answer

1

You can use this:

tr:hover:nth-child(2n-1) td {background-color: #ffff99; }

That will overwrite this rule of the Pure:

/* nth-child selector for modern browsers */
.pure-table-striped tr:nth-child(2n-1) td {
    background-color: #f2f2f2;
}

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.