Transition when using hover - How to do a "reverse" mode?

Question

Transition when using hover - How to do a "reverse" mode?

Navigation

#1 by (1 votes)

2

Here's the transition:

.subcont {
  width: 250px;
  height: 180px;
  background: purple;
}

.border1 {
  position: absolute;
  width: 5px;
  height: 0;
  margin-left: 250px;
  margin-top: -5px;
  background: red;
  transition-delay: 0;
  transition-duration: 0.3s;
}

.border2 {
  position: absolute;
  width: 0px;
  height: 5px;
  margin-left: 250px;
  margin-top: 180px;
  background: red;
  transition-delay: 0.3s;
  transition-duration: 0.3s;
}

.border3 {
  position: absolute;
  width: 5px;
  height: 0;
  margin-left: -5px;
  margin-top: 180px;
  background: red;
  transition-delay: 0.6s;
  transition-duration: 0.3s;
}

.border4 {
  position: absolute;
  width: 0;
  height: 5px;
  margin-left: -5px;
  margin-top: -5px;
  background: red;
  transition-delay: 0.9s;
  transition-duration: 0.3s;
}

.subcont:hover>.border1 {
  height: 190px;
}

.subcont:hover>.border2 {
  width: 255px;
  margin-left: -5px;
}

.subcont:hover>.border3 {
  height: 190px;
  margin-top: -5px;
}

.subcont:hover>.border4 {
  width: 255px;
}

<div class="subcont">
  <div class="border1"></div>
  <div class="border2"></div>
  <div class="border3"></div>
  <div class="border4"></div>
</div>

As you can see, it changes the position and size of certain divs to cause a border to appear in the .subcont div; What I would like to know is: how to create a reverse effect to this? I mean, when the user hover in the div .subcont this effect occurs, but how do you do that, the moment the user takes the mouse from above the .subcont div, that effect reverts (disappear first the border4 div, then the border3 , etc.)?

css hover

asked by anonymous 21.11.2017 / 02:02

1 answer

Is there a difference between "Test Team" and "QA Team"? R data preparation for cluster use

score 1 · Accepted Answer

I used pseudo class :not and inverted the value of transition-delay test now

          .subcont {
            width: 250px;
            height: 180px;
            background: purple;
          }
          
          .border1 {
            position: absolute;
            width: 5px;
            height: 0;
            margin-left: 250px;
            margin-top: -5px;
            background: red;
            transition-delay: 0;
            transition-duration: 0.3s;
          }
          
          .border2 {
            position: absolute;
            width: 0px;
            height: 5px;
            margin-left: 250px;
            margin-top: 180px;
            background: red;
            transition-delay: 0.3s;
            transition-duration: 0.3s;
          }
          
          .border3 {
            position: absolute;
            width: 5px;
            height: 0;
            margin-left: -5px;
            margin-top: 180px;
            background: red;
            transition-delay: 0.6s;
            transition-duration: 0.3s;
          }
          
          .border4 {
            position: absolute;
            width: 0;
            height: 5px;
            margin-left: -5px;
            margin-top: -5px;
            background: red;
            transition-delay: 0.9s;
            transition-duration: 0.3s;
          }
          
          .subcont:hover>.border1 {
            height: 190px;
            
          }
          .subcont:not(:hover)>.border1 {
            position: absolute;
            width: 5px;
            height: 0;
            margin-left: 250px;
            margin-top: -5px;
            background: red;
            transition-delay: 0.9s;
            transition-duration: 0.3s;
            
          }
          
          .subcont:hover>.border2 {
            width: 255px;
            margin-left: -5px;
          }
          .subcont:not(:hover)>.border2 {
            position: absolute;
            width: 0px;
            height: 5px;
            margin-left: 250px;
            margin-top: 180px;
            background: red;
            transition-delay: 0.6s;
            transition-duration: 0.3s;
          }
          
          .subcont:hover>.border3 {
            height: 190px;
            margin-top: -5px;
          }
          .subcont:not(:hover)>.border3 {
            position: absolute;
            width: 5px;
            height: 0;
            margin-left: -5px;
            margin-top: 180px;
            background: red;
            transition-delay: 0.3s;
            transition-duration: 0.3s;
          }
          
          .subcont:hover>.border4 {
            width: 255px;
          }
          .subcont:not(:hover)>.border4 {
            position: absolute;
            width: 0;
            height: 5px;
            margin-left: -5px;
            margin-top: -5px;
            background: red;
            transition-delay: 0s;
            transition-duration: 0.3s;
          }

<div class="subcont">
    <div class="border1"></div>
    <div class="border2"></div>
    <div class="border3"></div>
    <div class="border4"></div>
</div>