Question

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

Answer 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
    }
})

视频悬停效果

1 个答案: