如何使图像成为鼠标悬停的嵌入式视频？

Question

所以今天我学会了如何在鼠标悬停时将图像更改为不同的图像。

我很想知道，我可以将鼠标上的图像更改为youtube视频吗？

Answer 1

当然，您可以替换所需的任何HTML内容。为了更容易处理事件处理程序（在您的情况下鼠标悬停），我建议您查看一些现有的Javascript库，如jQuery。

Answer 2

使用jQuery和一些CSS：

DEMO：http://jsfiddle.net/3SQtS/

<!-- HTML -->
<div class="replacement">
    <img class="top-img" src="http://placekitten.com/560/315" alt="Kitten">
    <iframe class="video" width="560" height="315" src="http://www.youtube.com/embed/H93n-k3SkiQ" frameborder="0" allowfullscreen></iframe>
</div>

---

/* CSS */
.replacement {
    position: relative;
}
.top-img {
    position: absolute;
}

---

// jQuery
jQuery(document).ready(function($) {
    $('.replacement .top-img').on('mouseenter', function () {
        $(this).fadeOut(500);
    });
});