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

我怎样才能做到这一点?

4

6 回答 6

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

x = 内联、块或内联块

于 2013-02-08T11:09:32.860 回答
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;
}
于 2013-02-08T11:12:30.090 回答
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>
于 2013-02-08T11:16:19.520 回答
0

尝试这个 :-

.spotlight-item:hover .play-button
{
  display:block;
}
于 2013-02-08T11:12:32.937 回答
0
.spotlight-item       > img { visibility: hidden  }
.spotlight-item:hover > img { visibility: visible }

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

警告::hover无指针设备无法仅使用 using。

于 2013-02-08T11:11:21.410 回答
0

只需添加一些 CSS 规则。例子:

.someClass:hover img {
    display:block;
}

这将显示所有<img>的内部.someClass元素。

于 2013-02-08T11:12:00.050 回答