有人可以解释为什么“悬停”对我的 CSS 不起作用吗？我想要将鼠标悬停在播放按钮上以将鼠标光标更改为“指针”的操作。
jsfiddle 在这里: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;
}
感谢任何帮助或建议。
最佳答案
只需从
中删除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;
}
关于html - CSS 悬停不适用于嵌套类，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21072607/