CODEWITHSUNDEEP
css
maknel
maknel

Reputation: 309

Hover not removing styling on mouseoff

I have an video that moves on hover:

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

The video shifts when I hover over it, and shifts back when I mouse off it. However, if I mouse off to the left, the video does not shift back. How can I fix this? Thanks!

Note: this only happens if you mouse off slowly (and to the left, of course).

JSFiddle

Upvotes: 1

Views: 88

Answers (2)

Ehsan
Ehsan

Reputation: 12959

you missing , in your code :

Change:

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

To:

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>

Upvotes: 1

Miro
Miro

Reputation: 8650

It's not working because you are moving the very element that's triggering the move. You need to wrap your .video in one more div (called .video-wrapper).

Then you can use .video-wrapper:hover .video to move the inner element.

Also, it didn't work before because you forgot the comma between the x, y values.

.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);
}
<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>

Upvotes: 2

Related Questions