Question

我有一个悬停的视频：

.video:hover {
 z-index: 5;
 transform: translate(1vw, -1vh);
}

当我将鼠标悬停在视频上时，视频会移动，当我将鼠标移开时，视频会向后移动。但是，如果我向左移动鼠标，则视频不会向后移动。我怎样才能解决这个问题？谢谢！

注意：只有当你慢慢地（当然是左边）鼠标时才会发生这种情况。

JSFiddle

Answer 1

它不起作用，因为你正在移动触发移动的元素。您需要将.video包含在另一个div中（称为.video-wrapper）。

然后你可以使用.video-wrapper:hover .video移动内部元素。

此外，它之前没有用，因为你忘记了x，y值之间的逗号。

＆＃13;

.cell {
  height: 20vw;
  border: 0.5vh solid #5776b9;
  width: 35vw;
}

.fit {
  height: inherit;
  width: inherit;
}

.video-wrapper{
  display:inline-block;
  margin:2vw;
}

.video-wrapper:hover .video {
  transform: translate(1vw, -1vh);
}

＆＃13;

<div class="video-wrapper">
  <div class="video cell">
   <video class="fit" controls>
     <source src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" type="video/mp4">
   </video>
  </div>
</div>

＆＃13;

Answer 2

您在代码中遗漏了,：

更改：

transform: translate(1vw -1vh); ^-------------------

要

transform: translate(1vw,-1vh); ^--------------------

.cell { height: 20vh; border: 0.5vh solid #5776b9; width: 35vw; } .fit { width:100%; } .video { width:200px; height:150px; } .video:hover { transform: translate(1vw ,-1vh); }

<body> <div class="video cell"> <video class="fit" controls> <source src="https://www.w3schools.com/tags/movie.mp4" type="video/mp4"> </video> </div> </body>

鼠标悬停时不会删除样式

2 个答案: