[英]How to display an image inside a div only when hovered the parent div?
<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>
The image with play-button class is set to display: none; 具有播放按钮类的图像设置为显示:无; by default. 默认。 However, when user hovers the "spotlight-item" div, play-button image should be set to display: show; 但是,当用户将“ spotlight-item” div悬停时,播放按钮图像应设置为显示:show;
How can I do this? 我怎样才能做到这一点?
.spotlight-item:hover .play-button { display: x; }
x =内联,块或内联块
Solved it myself. 我自己解决了。
/* 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;
}
.spotlight-item > img { visibility: hidden }
.spotlight-item:hover > img { visibility: visible }
The visibility
property reserves space for the element even when it isn't visible. visibility
属性为元素保留空间,即使该元素不可见也是如此。 This prevents the rendered elements jumping around. 这样可以防止渲染的元素跳来跳去。
Caveat: Only using :hover
isn't accessible for pointerless devices. 警告:无指针设备不能仅使用:hover
。
Just add some CSS rules. 只需添加一些CSS规则即可。 Example: 例:
.someClass:hover img {
display:block;
}
This will display all <img>
's inside .someClass
elements. 这将显示.someClass
元素内部的所有<img>
。
try this :- 尝试这个 :-
.spotlight-item:hover .play-button
{
display:block;
}
<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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.