How to do when the person takes the mouse from the top decrease the size only with css

Asked

Viewed 820 times

-2

I want to know if there is a way when you take the mouse off a div it decrease the size only with the css example: (:)

.post:hover {
    width: 900px;
    height: 500px;
    background-color: #dddddd;
    animation-name: aumentar;
    animation: 1s;
}

css events animation

  • I think only with Javascript

  • You want the element to decrease and be small even after you take the mouse off it and stay like this forever?

  • Opa I can decrease normally when the person takes the mouse, is that I made an animation to decrease and I wanted to apply it when only the person took the mouse from above

3 answers

1

This example increases the div when the mouse is on top, and returns to the original size when the mouse leaves the div.

.post{
  width:100px;
  height:100px;
  background-color:#dddddd;  
  transition-duration:1s;
  transform-origin: 0% 0%
}

.post:hover{
  transform:scale(2);
}
<div class="post"></div>

1

A pseudo-class :hover is a type of selector that happens only when the mouse is over the specified element.

<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
  
    .post {
      width: 200px;
      height: 200px;
      background-color: red;
    }

    .post:hover {
      width: 100px;
      height: 100px;
    }
  
  </style>
</head>
<body>

<div class="post"></div>
  
</body>
</html>

This simple example above shows perfectly what I just said, :hover it will only happen when mouse is on top of the element then if you put the mouse more the less 190px on the x-axis and 5px on the y axis, for example, you will see that the div will be kind of flashing this because the div was defined as width: 200px and height: 200px and when you pass the mouse over it will be width: 100px and height: 100px, but at the same time that I move the mouse over I’m also taking off so it gets in this nasty state.

In this case you could use Javascript, but like you said.

css only

Then you would have to use the example from above, but just a sample of how it would be with the Javascript.

<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
  
    .post {
      width: 200px;
      height: 200px;
      background-color: red;
    }
  
  </style>
</head>
<body>

<div class="post"></div>
  
<script>

var div = window.document.querySelector(".post");

div.addEventListener("mouseout", saiu);

function saiu() {

  div.style.width = "100px";
  div.style.height = "100px";
}

</script>

</body>
</html>

Very simple, no bug, no nothing, working perfectly so get ready to choose one from above :).

0

It’s pretty simple to decrease the size with Hover. It’s just you say the size of it normally like in the example1 and then decrease that size in the example1:Hover. 

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
    .exemplo1 {
    width: 150px;
    height: 150px;
    background-color: #dddddd;
    animation: 1s;
    }
   .exemplo1:hover {
    width: 110px;
    height: 110px;
    color: white;
    background-color: green;
    animation: 1s;
    }
  
    </style>
</head>
<body>
    <div class="exemplo1">
    <p>exemplo 1</p>
    </div>
</body>
</html>

  • is bugged when the mouse is in that 40px space between "110px and 150px"

  • It is bugged kkkkk ai died!

Browser other questions tagged css events animation

You are not signed in. Login or sign up in order to post.