Hover not working in HTML/CSS example

Question

I'm very new to HTML and CSS. This is an example directly taken from Jon Duckett's book.

<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">

        body {
            font-family: Arial, Verdana, sans-serif;
            color: #111111;}
        table {
            width: 600px;}
        th, td {
            padding: 7px 10px 10px 10px;}
        th {
            text-transform: uppercase;
            letter-spacing: 0.1em;
            font-size: 90%;
            border-bottom: 2px solid #111111;
            border-top: 1px solid #999;
            text-align: left;}
        tr.even {
            background-color: #efefef;}
        tr.hover {
            background-color: #c3e6e5;}
        .money {
            text-align: right;}     

        </style>

    </head>
    <body>
        <h1>First Edition Auctions</h1>
        <table>
            <tr>
                <th>Author</th>
                <th>Title</th>
                <th class="money">Reserve Price</th>
                <th class="money">Current Bid</th>
            </tr>

            <tr>
                <td>E.E. Cummings</td>
                <td>Tulips & Chimneys</td>
                <td class="money">$2,000.00</td>
                <td class="money">$2,642.50</td>
            </tr>

            <tr class="even">
                <td>Charles d'Orleans</td>
                <td>Poemes</td>
                <td class="money"></td>
                <td class="money">$5,866.00</td>
            </tr>
            <tr>
                <td>T.S. Eliot</td>
                <td>Poems 1909 - 1925</td>
                <td class="money">$1,250.00</td>
                <td class="money">$8,499.35</td>
            </tr>

            <tr class="even">
                <td>Sylvia Plath</td>
                <td>The Colossus</td>
                <td class="money"></td>
                <td class="money">$1,031.72</td>
            </tr>
        </table>
    </body>
</html>

You can view the output here, with the hover there also not working.

It looks like the example on his website works fine. I'm not sure what I did wrong in my code. It looks fine.

Browser I'm using is Chrome 48.0.2564.97.

did you mean tr:hover?

pethel
– pethel

2016-02-03 15:43:57 +00:00
Commented Feb 3, 2016 at 15:43 — pethel
– pethel, Commented Feb 3, 2016 at 15:43

Rounin · Accepted Answer · 2016-02-03 15:44:20Z

5

:hover is a pseudo-class.

It is preceded by a colon (:) not a period (.)

answered Feb 3, 2016 at 15:44

Rounin

29.9k13 gold badges102 silver badges127 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Béru · Accepted Answer · 2016-02-03 15:46:45Z

1

Use :hover instead of .hover (.hover matches tag with class="hover")

tr:hover {
    background-color: #c3e6e5;}

answered Feb 3, 2016 at 15:46

Béru

364 bronze badges

Comments

Huginn · Accepted Answer · 2016-02-03 15:46:51Z

0

Your issue is you called out a class instead of declaring a state.

tr.hover {background-color: #c3e6e5;}

Should be

tr:hover {background-color: #c3e6e5;}

The period in your original version calls out a class that doesn't exist.

answered Feb 3, 2016 at 15:46

Huginn

2402 gold badges6 silver badges21 bronze badges

Comments

Bonzai · Accepted Answer · 2016-02-03 15:46:52Z

0

It should read

tr:hover {background-color: #c3e6e5;}

not

tr.hover {background-color: #c3e6e5;}

answered Feb 3, 2016 at 15:46

Bonzai

1591 silver badge10 bronze badges

Collectives™ on Stack Overflow

Hover not working in HTML/CSS example

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related