Question

有人可以解释为什么'悬停'不适用于我的CSS吗？我希望将鼠标悬停在播放按钮上以将鼠标光标更改为“指针”。

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;
}

感谢您提供任何帮助或建议。

Answer 1

只需从

中删除z-index:-1即可

.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 */
}

并添加此css

.animcontrol:hover{

   cursor: pointer; 

}

Working Demo

Answer 2

更改.play元素指针的css规则仅在.imageFrame处于state：hover时才适用。但你想要相反！ .imageFrame .play：hover应该可以工作

Answer 3

您有z-index:-1;尝试将其更改为正数nr。您无需更改其他任何内容即可...

Answer 4

请参阅 updated fiddle 。

问题是z-index:-1将问题更改为0或删除它。如果您想使用z-index，那么我建议您阅读 stacking order 。此外，您根本不需要hover。以下是：

.play{
    cursor: pointer;
}

CSS悬停不适用于嵌套类

4 个答案: