Q:

:hover class not registering in browser

HTML code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>vinyl</title>    
        <link rel = "stylesheet" href="css/indexstyles.css"> 
    </head>
    <body>
        <div class = "sleeve">
            <div class = "album"><div class = "innerhole"></div></div>    
        </div>
    </body>    
</html>

CSS code
.album {
    position: relative;
    width: 300px;
    height: 300px;
    background: #2C3E50;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
}

.album :hover{background: white;}

.innerhole{
    position: absolute;
    width: 100px;
    height: 100px;
    top:50%;
    left:50%;
    margin-top:-50px;
    margin-left:-50px;
    background: #E00000;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    box-sizing: border-box;
}

body { background: #CCB07A url('http://i.imgur.com/uNVzcoX.png') repeat; }

In this program I am trying to implement the :hover pseudo class on the album class. I have tried to do this but have found that it has not been registering at all on the browser. I have also checked that it is not a compiler issue. Any help would be appreciated. Thanks.

A:

I tested your code and there was a space after album in album:hover..
I tried that in jsfiddle
:hover is working very well
Check this fiddle for more details..

