CODEWITHSUNDEEP
htmlcss
user2551612
user2551612

Reputation: 41

Hyperlink won't change color on hover or on visited

This is part of my HTML. The hyperlinks don't change color when you hover over them, even though I have them coded to. Do you have any idea why not?

<div class = 'container' >
                    <header> name goes here Illustration</header>
                <nav>
                    <!-- Site navigation menu -->
                    <ul>
                        <li><a href = 'index.html'>home</a></li>
                        <li><a href = '#'>film & Game </a></li>
                        <li><a href = '#'>sketchbook</a></li>
                        <li><a href = '#'>paintings</a></li>
                        <li><a href = 'contact.html'>contact/Info</a></li>
                    </ul>
                </nav>

                <!-- Main content -->
                <div  id='content' > </div>


            </div>

and this is a part of my CSS

a:      link{
    color:              white;
    font-size:          40px;
    font-family:        Modern No. 20;
    text-decoration:    none;

    }

a: visited{
    color:          yellow;
    font-size:      20px;
    font-family:    Modern No. 20;
    text-decoration:    none;
    }

a:  hover{
    color:  blue;
    text-decoration:    underline;
}

Upvotes: 0

Views: 1709

Answers (1)

redditor
redditor

Reputation: 4266

You need to remove the white space between a: and link, ie:

a:link{
    color:              white;
    font-size:          40px;
    font-family:        Modern No. 20;
    text-decoration:    none;

    }

a:visited{
    color:          yellow;
    font-size:      20px;
    font-family:    Modern No. 20;
    text-decoration:    none;
    }

a:hover{
    color:  blue;
    text-decoration:    underline;
}

Upvotes: 1

Related Questions