我正在尝试在具有 3px 边框的图像上放置一个播放按钮。当用户滚动图像时,我希望播放按钮 :hover 以及图像边框 :hover。
问题是播放按钮只有在我翻过它时才会启动。不是当我翻转图像时。
我的 HTML:
<div class="views-field-field-thumbnail">
<a href="/videos">
<img src="individual.png" width="230" height="130">
</a>
</div>
<div class="thumbnail-play">Play</div>
我的 CSS:
.views-field-field-thumbnail img {border: 7px solid #333;}
.views-field-field-thumbnail img:hover {border: 7px solid #000;}
.thumbnail-play {
text-indent: -9999px;
background: url(VideoPlayerOff.png) 0px 0px no-repeat;
position: relative;
height: 50px;
width: 50px;
margin-top: -95px;
margin-bottom: 0px;
margin-left: 0px;
}
.thumbnail-play:hover {
text-indent: -9999px;
background: url(VideoPlayerOn.png) 0px -50px no-repeat;
}
更新:看起来我可以稍微更改代码并将播放图像放置在我需要的任何位置。只是有点困惑它的最佳位置。