0

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

不过我想知道，我可以在鼠标悬停时将图像更改为 youtube 视频吗？

4

2 回答 2

1

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

于 2013-04-14T15:02:15.930 回答
0

使用 jQuery 和一些 CSS：

演示：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);
    });
});
于 2013-04-14T15:20:26.107 回答