播放视频并粘贴鼠标 - jQuery

Question

我想要一个视频播放并粘贴鼠标指针，当访问者悬停在红色框中时。当他用鼠标离开红框时，视频停止并消失。

这是我走到这一步：jsfiddle

的jQuery：

$(document).bind('mousemove', function(e){ 
    $('#tail').css({ 
     left: e.pageX + 20, 
     top: e.pageY 
    }); 
}); 

var figure = $(".video").hover(hoverVideo, hideVideo); 

function hoverVideo(e) { 
    $('video', this).get(0).play(); 
} 

function hideVideo(e) { 
    $('video', this).get(0).pause(); 
} 

$("#red").mouseover(function() { 

    $("#videosList").css("display","block"); 

}); 

HTML：

<div id="tail"> 
        <div id="videosList"> 



<div class="video"> 
    <video class="thevideo" loop preload="none"> 
     <source src="http://giant.gfycat.com/VerifiableTerrificHind.mp4" type="video/mp4"> 
     <source src="http://giant.gfycat.com/VerifiableTerrificHind.webm" type="video/webm"> 
    Your browser does not support the video tag. 
    </video> 
    </div> 
    Hover mouse over video. Desktop only [ Obviously! ;) ] 
</div> 
</div> 

<div id="red" style="height:200px;width:200px;background:red;"> 

</div> 

Answer 1

做了一些改变，它的工作现在fiddle

有报道说，是有点过了几个语法的东西，并需要绑定到#red而不是.video

Answer 2

你的代码是非常接近的是正确的。当鼠标离开红色框时，可以使用jQuery的mouseleave（）函数来隐藏视频。我还使用jQuery的hide（）和show（）方法，而不是修改videosList的css。

$(document).ready(function() { 
    $(document).bind('mousemove', function(e){ 
     $('#tail').css({ 
     left: e.pageX + 20, 
     top: e.pageY 
     }); 
    }); 

    var figure = $(".video").hover(hoverVideo, hideVideo); 

    function hoverVideo(e) { 
    $('video', this).get(0).play(); 
    } 

    function hideVideo(e) { 
    $('video', this).get(0).pause(); 
    } 

    $("#red").mouseover(function() { 
    $("#videosList").show(); 
    }); 

    $('#red').mouseleave(function() { 
    $('#videosList').hide(); 
    }); 
});