我正在尝试在图像上制作视频悬停效果，当鼠标悬停在图像上时，应该会弹出一个视频，就像这个 website 中的视频一样
在过去的几个月里，我一直在努力寻找解决这个问题的方法。
有人知道怎么做吗？
这实际上是我设法获得的图像悬停效果。那么，有没有办法让视频像图像一样弹出，而不是弹出图像？
<html>
<head>
<title>Test</title>
<script type="text/javascript" src="js/jquery-1.4.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('div.thumbnail-item').mouseenter(function(e) {
x = e.pageX - $(this).offset().left;
y = e.pageY - $(this).offset().top;
$(this).css('z-index','15')
.children("div.tooltip")
.css({'top': y + 10,'left': x + 20,'display':'block'});
}).mousemove(function(e) {
x = e.pageX - $(this).offset().left;
y = e.pageY - $(this).offset().top;
$(this).children("div.tooltip").css({'top': y + 10,'left': x + 20});
}).mouseleave(function() {
$(this).css('z-index','1')
.children("div.tooltip")
.animate({"opacity": "hide"}, "fast");
});
});
</script>
<style>
.thumbnail-item {
position: relative;
float: left;
margin: 0px 5px;
}
.thumbnail-item a {
display: block;
}
.thumbnail-item img.thumbnail {
border:3px solid #ccc;
}
.tooltip {
display: none;
position: absolute;
padding: 8px 0 0 8px;
}
.tooltip span.overlay {
background: url(images/overlay.png) no-repeat;
position: absolute;
top: 0px;
left: 0px;
display: block;
width: 350px;
height: 200px;
}
</style>
</head>
<body>
<div class="thumbnail-item">
<a href="#"><img src="images/Capture1.jpg" class="thumbnail"/></a>
<div class="tooltip">
<img src="images/2 Davis Road.jpg" alt="" width="330" height="185" />
<span class="overlay"></span>
</div>
</div>
<div class="thumbnail-item">
<a href="#"><img src="images/Capture2.jpg" class="thumbnail"/></a>
<div class="tooltip">
<img src="images/Camberwell Town Hall, Roof Restoration.jpg" alt="" width="330" height="185" />
<span class="overlay"></span>
</div>
</div>
<div class="thumbnail-item">
<a href="#"><img src="images/Capture3.jpg" class="thumbnail"/></a>
<div class="tooltip">
<img src="images/Children.jpg" alt="" width="330" height="185" />
<span class="overlay"></span>
</div>
</div>
<div class="clear"></div>
最佳答案
你可以使用 jQuery使用事件监听器( mouseenter 和 mouseleave )在工具提示中插入视频元素。 Bootstrap和 jQuery UI提供可以在您的网站上使用的出色工具提示。
这是一个使用 jQuery 的代码示例:
$(".video").on("mouseenter", function(){
var video = "<video></video>"; // remember to add the src attribute, etc...
// code for displaying tooltip
$(".tooltip").append(video); // assuming tooltip has class of .tooltip
$(this).on("mouseleave", function(){
// code here for hiding the tooltip when the hover stops
}
})
关于jquery - 视频悬停效果，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20532858/