Highlight table row under the cursor with Pure CSS

Question

Highlight table row under the cursor with Pure CSS

Navigation

#1 by (1 votes)

2

I created a very simple HTML table with 4 rows and 4 columns and I used Pure CSS to make it prettier.

Next, I wanted the table row to be highlighted when the user hovered over that row. I just added the code below into the <head> tag:

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

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

Would anyone have any suggestions as to how I change the code so that the lines are highlighted when I hover over both the white and gray lines?

Follow the complete 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

asked by anonymous 16.05.2015 / 03:05

1 answer

Automatically write to a default folder C # Google api v2, I already have the key, but provided by third parties, how to enable without SHA-1?

score 1 · Answer 1

You can use this:

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

That will overwrite Pure's this rule :

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