Adding hover effect to a CSS animation

Question

I have the following code and when you run the code, the box/block automatically moves from its place and finally reaches the starting point after completing a square cycle (Left -> Right -> Bottom -> Left -> Top). I want the box to move from its place only when it is hovered over. The original code is:

<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
  animation-name: example;
  animation-duration: 4s;
}

@keyframes example {
  0%   {background-color:red; left:0px; top:0px;}
  25%  {background-color:yellow; left:200px; top:0px;}
  50%  {background-color:blue; left:200px; top:200px;}
  75%  {background-color:green; left:0px; top:200px;}
  100% {background-color:red; left:0px; top:0px;}
}
</style>
</head>
<body>
<div></div>
</body>
</html>

I tried to insert the "hover" attribute using CSS but it doesn't work (the code is completely ignored). How can I modify the code such that the block only moves from its place when it's hovered over and when the cursor is removed from it, it goes back to its original place?

Ozik Jarwo · Accepted Answer · 2021-08-07 12:34:49Z

3

You need a container to do that, try this:

<html>
<head>
<style> 
.block {
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
}
.container:hover .block {animation-name: example; animation-duration: 4s;}

@keyframes example {
  0%   {background-color:red; left:0px; top:0px;}
  25%  {background-color:yellow; left:200px; top:0px;}
  50%  {background-color:blue; left:200px; top:200px;}
  75%  {background-color:green; left:0px; top:200px;}
  100% {background-color:red; left:0px; top:0px;}
}
</style>
</head>
<body>
  
<div class='container'>
  <div class='block'></div>
</div>
  
</body>
</html>

Or, you can try this too. But make sure your mouse always hovering the block.

<html>
<head>
<style> 
.block {
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
}
.block:hover {animation-name: example; animation-duration: 4s;}

@keyframes example {
  0%   {background-color:red; left:0px; top:0px;}
  25%  {background-color:yellow; left:200px; top:0px;}
  50%  {background-color:blue; left:200px; top:200px;}
  75%  {background-color:green; left:0px; top:200px;}
  100% {background-color:red; left:0px; top:0px;}
}
</style>
</head>
<body>
  
<div class='block'></div>
  
</body>
</html>

edited Aug 7, 2021 at 12:34

answered Aug 7, 2021 at 12:04

Ozik Jarwo

5662 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

pr0grammar Over a year ago

I have a follow up question if you don't mind: in the last code, what did you do that made the block only movable when the mouse always hovers over it?

Ozik Jarwo Over a year ago

I applied a hover function to .block (in CSS), so that when you hover the .block, it will move to the right (and away from the cursor of course), so that if it has moved enough to get out of the cursor, hover will no longer work. But if your cursor moves with the movement of the .block, then the .block will continue to get hover from the cursor, so the hover function will continue to work. Do you understand what I mean? Sorry if it's not clear.

Collectives™ on Stack Overflow

Adding hover effect to a CSS animation

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related