CODEWITHSUNDEEP
csscss-transitions
codingsplash
codingsplash

Reputation: 5045

Hover transition misbehaves on movement of cursor

I am trying to move an element using hover transition. What I expected was when the mouse if hovered over the element, the transition will fire. When the mouse leaves the element, it will transition back. But what is happening is, instead of hover, it behaves like mouseover. That means, even within the element, if I move my cursor, the transition fires. My code is:

.wrapper {
  height: 150px;
  overflow: hidden;
  display: flex;
  width: 150px;
  flex-wrap: wrap;
}

.img {
  width: 100%;
  height: 150px;
  background-color: tomato;
  color: black;
}

.info {
  height: 150px;
  width: 100%;
  background-color: skyblue;
  transform: translateY(0);
  transition: all 1s;
}

.img:hover~.info {
  transform: translateY(-150px);
}
<div class="wrapper">
  <div class="img">This is IMG</div>
  <div class="info">This is info</div>
</div>

Why does it behave like this?

Upvotes: 2

Views: 82

Answers (2)

Yadab Sutradhar
Yadab Sutradhar

Reputation: 649

Use hover for both .img & .info, so when one of these present you can stay with the situation you want. when leave just then .info will go back.

.wrapper{
            height:150px;
            overflow: hidden;
            display:flex;
            width:150px;
            flex-wrap: wrap;
        }
        .img{
            width:100%;
            height:150px;
            background-color: tomato;
            color:black;
        }
        .info{
            height:150px;
            width:100%;
            background-color: skyblue;
            transform: translateY(0);
            transition: all 1s;
        }
        .img:hover ~ .info, .info:hover{
            transform: translateY(-150px);
        }
<div class="wrapper">
        <div class="img">This is IMG</div>
        <div class="info">This is info</div>
    </div>

Upvotes: 0

C3roe
C3roe

Reputation: 96226

Why does it behave like this?

Because you are not hovering .img any more, when you place .info above it.

Either use pointer-events: none on .info, or if that is not possible (because the user needs to interact with that element as well), then handle this via :hover on the parent container - .wrapper:hover .info { … }

Upvotes: 4

Related Questions