如何仅当悬停在父div上时才显示div内的图像？

Question

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

默认情况下，带有play-button类的图像设置为display: none。但是，当用户悬停"spotlight-item“div时，播放按钮图像应设置为display: show；

我该怎么做呢？

Answer 1

.spotlight-item:hover .play-button { display: x; } 

X=行内、块或行内块

Answer 2

我自己解决的。

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

Answer 3

.spotlight-item       > img { visibility: hidden  }
.spotlight-item:hover > img { visibility: visible }

即使元素不可见，visibility属性也会为其保留空间。这可以防止渲染的元素跳来跳去。

警告:对于无指针设备，仅使用:hover是不可访问的。