CODEWITHSUNDEEP
htmlcsshover
Paul
Paul

Reputation: 69

CSS hover not working for nested class

Can someone explain why 'hover' is not working for my css? I would like the action of hovering over the play button to change the mouse cursor to 'pointer'.

jsfiddle here: http://jsfiddle.net/2vqsA/5

html:

<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
<body>
    <div class="imageframe">
        <img name="slideImg" src="someImage.jpg" width=500 height=375 border=0></img>
        <div class="animcontrol">
            <table cellpadding='5'>
                <tbody>
                    <tr>
                        <td>
                            <div class="play" onclick="playAnim();"></div>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>

css:

.imageframe {
position: relative;
z-index: -1;
max-width: 35em;
max-height: 60em;
padding: 0.5em 0.5em 0.5em 0.5em;
background-color:rgba(255, 255, 255, 0.4);
border: 1px solid rgba(0, 0, 0, 0.4);
border-radius: 10px;
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.4);
filter:alpha(opacity=40);
/* For IE8 and earlier */
}
.animcontrol {
position: relative;
min-width: 5%;
max-width: 12em;
max-height: 5em;
padding: 0.2em 0.2em 0.2em 0.2em;
background-color: #ffffff;
border: 1px solid rgba(0, 0, 0, 0.4);
border-radius: 10px;
z-index: 100;
}
.play:before {
font-family: FontAwesome;
font-size: 24px;
content:"\f04b";
color: rgba(84, 84, 90, 1);
}
.imageframe:hover .play{
cursor: pointer;
}

Thanks for any help or suggestions.

Upvotes: 1

Views: 1901

Answers (4)

acarlon
acarlon

Reputation: 17264

See this updated fiddle.

It is the z-index:-1 that is is the problem change it to 0 or remove it. If you want to use z-index, then I suggest reading about stacking order. Also, you don't need hover at all. The following will do:

.play{
    cursor: pointer;
}

Upvotes: 0

NewInTheBusiness
NewInTheBusiness

Reputation: 1475

You have z-index:-1;Try changing it to a positive nr. You do not need to change anything else for it to work...

Upvotes: 0

Sajad Karuthedath
Sajad Karuthedath

Reputation: 15767

just remove the z-index:-1 from 

.imageframe {
    position: relative;

    max-width: 35em;
    max-height: 60em;
    padding: 0.5em 0.5em 0.5em 0.5em;
    background-color:rgba(255, 255, 255, 0.4);
    border: 1px solid rgba(0, 0, 0, 0.4);
    border-radius: 10px;
    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.4);
    filter:alpha(opacity=40);
    /* For IE8 and earlier */
}

and add this css

.animcontrol:hover{

   cursor: pointer; 

}

Working Demo

Upvotes: 1

feydaykyn
feydaykyn

Reputation: 696

The css rule which changes the pointer of the .play element will only apply if .imageFrame is in state :hover. But you want the contrary ! .imageFrame .play:hover should work

Upvotes: 0

Related Questions