CODEWITHSUNDEEP
htmlcss
raiyan106
raiyan106

Reputation: 85

Why is the a:hover inside the div not working?

Can anyone please explain why the a:hover is not working? I have declared an id for it but still it does not seem to work.

 <!DOCTYPE html>
    <head>
        <style>
            #box1
            {
                width: 500px;
                height:300px;
                background-color: grey;
                border:4px solid pink;          
            }

            #id a:hover
            {
                z-index: 2;
                color:black;
                background-color: yellow;
                text-decoration: none;
            }

        </style>
    </head>     
    <html>
    <body>
    <h1 style="display:inline;padding-left:100px;padding-top:50px"> This is a heading</h1>
    <h2 style="display:inline-block;margin-left:10px;"> Another heading</h2>
    <div id="box1">
    <a id="link" href="http://google.com" style="position:block;letter-spacing:15px;margin-left:100px;
    font-size:50px;">GOOGLE</a>
    </body>
    </html>

Upvotes: 0

Views: 709

Answers (2)

Null
Null

Reputation: 152

@simpe answer is correct and working and you can also do it by

a#link:hover
            {
                z-index: 2;
                color:black;
                background-color: yellow;
                text-decoration: none;
            }

Upvotes: 1

simeg
simeg

Reputation: 1879

You don't have a selector called id. It's called box1. Change this:

#id a:hover
{
    z-index: 2;
    color:black;
    background-color: yellow;
    text-decoration: none;
}

to this:

#box1 a:hover
{
    z-index: 2;
    color:black;
    background-color: yellow;
    text-decoration: none;
}

This works for me: http://jsfiddle.net/X6wWu/

Upvotes: 2

Related Questions