<div class="spotlight-item width-2 height-2">
<a href="#" class="spotlight-info">
<h2 class="large">
Random text
</h2>
</a>
<img src="../images/background.jpg"> //actual image
<a href="#" onClick="alert(111)">
<img class="play-button" src="<%THEME%>images/play.png" style="width: 100px; height: 100px; margin-top: 30%; margin-left: 40%; display: none;">
</a>
</div>
带有播放按钮类的图像设置为display:none;默认情况下。但是,当用户悬停“spotlight-item”div时,播放按钮图像应设置为display:show;
我该怎么做?
答案 0 :(得分:2)
.spotlight-item:hover .play-button { display: x; }
x =内联,阻止或内联阻止
答案 1 :(得分:1)
自己解决了。
/* play button */
.spotlight-area .spotlight .spotlight-item img.play-button {
width: 100px; height: 100px; margin-top: 30%; margin-left: 40%;
visibility: hidden;
}
/* play button hover */
.spotlight-area .spotlight .spotlight-item:hover img.play-button {
width: 100px; height: 100px; margin-top: 30%; margin-left: 40%;
visibility: visible;
}
答案 2 :(得分:0)
.spotlight-item > img { visibility: hidden }
.spotlight-item:hover > img { visibility: visible }
visibility
属性为元素保留空间,即使它不可见。这可以防止渲染的元素跳转。
警告:无指针设备无法使用:hover
。
答案 3 :(得分:0)
只需添加一些CSS规则。例如:
.someClass:hover img {
display:block;
}
这将显示<img>
元素内的所有.someClass
。
答案 4 :(得分:0)
试试这个: -
.spotlight-item:hover .play-button
{
display:block;
}
答案 5 :(得分:0)
<style type="text/css">
.play-button {
width: 100px;
height: 100px;
margin-top: 30%;
margin-left: 40%;
display: none;
}
.spotlight-item:hover .play-button {
display: block;
}
</style>
<div class="spotlight-item width-2 height-2">
<a href="#" class="spotlight-info">
<h2 class="large">
Random text
</h2>
</a>
<img src="../images/background.jpg"> //actual image
<a href="#" onClick="alert(111)">
<img class="play-button" src="<%THEME%>images/play.png">
</a>
</div>