视频悬停效果答案

【问题标题】：Video Hover Effect视频悬停效果
【发布时间】：2013-12-12 00:37:47
【问题描述】：

我正在尝试在图像上制作视频悬停效果，当鼠标悬停在图像上时应该会弹出一个视频，就像 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>

【问题讨论】：

你花了几个月的时间尝试？显示您尝试过的内容。如果我花五分钟查看该页面的源代码，我可以轻松找到他们如何处理鼠标悬停、为其提供内容以及该内容是什么。
@paddy: 我已经添加了我拥有的代码。请看一下
当网站这样做时，我讨厌。我不小心将鼠标移到某物上，一个视频弹出并锁定了我的上网本。我一直试图关闭它，但页面上的视频和所有其他 javascript 让事情变得太慢，我什至无法使用我的电脑。
这可能对html5rocks.com/en/tutorials/video/basics有帮助
您可以随时使用视频创建一个新页面，并像普通弹出窗口一样链接到它？

标签： jquery html css

【解决方案1】：

您可以将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
    }
})

【讨论】：