播放視頻並粘貼鼠標 - 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(); 
    }); 
});