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

Question

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

任何人都可以帮忙？

Answer 1

HTML 和 CSS 可以轻松地将播放图像放置在缩略图上。我希望这不是你关心的问题；尽管我在下面提供了一些演示。 Javascript 也相当简单。侦听鼠标悬停事件和鼠标移出事件，并相应地调整样式。

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";
};

示例

有一天，无需任何 Javascript 就可以实现这一点。对于 CSS3 中的多个背景图像，缩略图 div 上的 :hover 可以附加“播放”背景图像。