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

您的代码非常接近正确。当鼠标离开红色框时，您可以使用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();
  });
});

Answer 2

进行了一些更改，现在正在使用fiddle

有一些语法问题稍微偏离，悬停事件需要绑定到var newForm = new Ext.form.FormPanel({ header: false, monitorValid: true, height: 390, width:800, layout: new Ext.layout.FormLayout, forceLayout: true, padding: 5, items: [ { html: "<hr>", style: 'display: block;margin-top: 0.5em; margin-bottom: 0.5em; margin-left: auto; margin-right: auto; border-style: hidden;' } ] });而不是#red

播放视频并坚持使用鼠标 - jQuery

2 个答案: