悬停时展开视频

Question

我正在尝试让视频在悬停时展开，但它不起作用，我无计可施。

（使用带引导程序的 Dreameaver CC 2015）

$("#wd1").mouseenter(function() {
	vid = document.getElementById("wd1"); 
	posTop = $("#wd1").offset().top;
	posLeft = $("#wd1").offset().left;
	vidWidth = vid.clientWidth;
	vidHeight = vid.clientHeight;
	$("#wd1").remove();
	vidPlayer = document.createElement('div')
	vidPlayer.setAttribute("id", "vpId");
	vidPlayer.style.position = "relative";
	vidPlayer.style.backgroundColor = "rgba(0,0,0,0.9)"
	vidPlayer.style.marginTop = posTop;
	vidPlayer.style.marginLeft = posLeft;
	vidPlayer.innerHTML = '<video src="public_html/media/VerifiableTerrificHind.mp4" width="'+vidWidth+'" height="'+vidHeight+'" autoplay loop type="video.mp4">';
	document.getElementsByTagName('body')[0].appendChild(vidPlayer);
	$("#vpId").hide().fadeIn(2000);
	$("#vpId").animate({width: "100%", height: "auto"}, 500);
});

#wd1:hover {
	z-index:1000;
	margin: 0 auto;
	width: 50vw;
	height: auto;
	display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="container-fluid">
	<div class="row">
    <div id="box"></div>
		<div class="col-lg-10 col-lg-offset-1">
    		<div class="row" id="vpDiv">
            	<div class="col-lg-3">
      <video id="wd1" src="https://matthew-williams.000webhostapp.com/media/VerifiableTerrificHind.mp4" alt="my image" width="100%" height="auto" data-video="https://matthew-williams.000webhostapp.com/media/VerifiableTerrificHind.mp4" type="video/mp4">
				</div>
  			</div>
		</div>
	</div>
</div>

https://www.jsnippet.net/snippet/1300/

Answer 1

你可以尝试使用：

    #wd1:hover {
    z-index:1000;
    margin: 0 auto;
    width: 50vw;
    height: auto;
    display: block;
    transform: translateX(25%) translateY(25%);
    -webkit-transform: translate(25%, 25%);
     -webkit-transition: all 0.2s linear;
       -moz-transition: all 0.2s linear;
        -ms-transition: all 0.2s linear;
         -o-transition: all 0.2s linear;
            transition: all 0.2s linear;
}

您可以使用translateX() 和translateY() 的值。