Question

我正在尝试创建一种效果，当鼠标悬停在图像上时会显示播放按钮。一个很好的例子是http://www.anyclip.com/

下面的视频

有人可以帮忙吗？

Answer 1

HTML和CSS可以轻松地在缩略图上定位播放图像。我希望这不是你的关注;虽然我在下面提供了一些演示。 Javascript也很简单。收听鼠标悬停事件和mouseout事件，并相应地调整样式。

HTML：

<div id="video">
    <img src="playbutton.png" id="play">
</div>

CSS：

#video {
 background-color:blue;
  width:300px;
   height:150px; 
    background-image:url("thumbnail.png");
    position:relative;
}
#play {
    position:absolute;
    height:50px;
    top:50px;
    width:50px;
    left:125px;
    display:none;
}

Javascript：

var elem = document.getElementById("video");
var play = document.getElementById("play");
elem.onmouseover = function() {
        play.style.display = "inline";
};
elem.onmouseout = function() {
        play.style.display = "none";
};

Example

总有一天，没有任何Javascript就可以实现这一点。使用CSS3中的多个背景图像，缩略图div上的:hover可以固定在“播放”背景图像上。

在链接鼠标悬停上显示播放图标

1 个答案: