CODEWITHSUNDEEP
css
Titus Decali
Titus Decali

Reputation: 3

Maintain button hover effect when outside of button

Hovering over btn should trigger display: block; on btn2 (which it does), then maintain this hover effect when I move the mouse below and outside of btn until I am able to click btn2 (which it currently doesn't).

I thought I could do this by using margin on btn, but that didn't work.

body {
  background-color: #673ab7;
  font-size: 30px;
}

.btn {
  margin-bottom: 50px;
  text-align: center;
  line-height: 100px;
  position: absolute;
  left: 50%;
  width: 100px;
  height: 100px;
  background-color: #00bcd4;
  border-radius: 100%;
  transition: all .2s ease-in-out;
  &:hover {
     transform:scale(1.05,1.05)
  }
}

.btn2 {
  position: absolute;
  top: 110px;
  left: 50.5%;
  text-align: center;
  line-height: 55px;
  border-radius: 50px;
  display: none;
  width: 50px;
  height: 50px;
  background-color: black;
  transition: all .2s ease-in-out;
    &:hover {
    transform:scale(1.05,1.05)
  }
}

.btn:hover +.btn2{
    transition: all .2s ease-in-out;
    display: block;
    position: absolute;
    transform: scale(1.05,1.05);
    transform: translate(20px);
  }

.icon {
  color: white;
}

.icon2 {
  color: white;
  width: 26px;
  line-height: 20px;
}
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">

<div class="container">
  <a href="#" class="btn"><i class="icon fa fa-link"></i></a>
  <a href="#" class="btn2"><i class="icon2 fa fa-edit"></i></a>
</div>

Upvotes: 0

Views: 1125

Answers (1)

Tank
Tank

Reputation: 1006

Set your :hover css to the parent .container tag of both items so the hover rules are maintained when moving from one element to the next. This way you are maintaining the hover state when moving from child to child.

I also changed display:none; to visibility:hidden; and opacity:0|opacity:1 respectively. `display:none' isn't going to animate.

The animation time also allows for a short period of overlap (non :focus) when moving from one element to the other. With some keyframing you can make the move from one to the other a bit cleaner.

body {
  background-color: #673ab7;
  font-size: 30px;
}

.btn {
  margin-bottom: 50px;
  text-align: center;
  line-height: 100px;
  position: absolute;
  left: 50%;
  width: 100px;
  height: 100px;
  background-color: #00bcd4;
  border-radius: 100%;
  transition: all .2s ease-in-out;
  &:hover {
     transform:scale(1.05,1.05)
  }
}

.btn2 {
  position: absolute;
  top: 110px;
  left: 50.5%;
  text-align: center;
  line-height: 55px;
  border-radius: 50px;
  visibility:hidden;
  opacity:0;
  width: 50px;
  height: 50px;
  background-color: black;
  transition: all .2s ease-in-out;
    &:hover {
    transform:scale(1.05,1.05)
  }
}

.container:hover .btn +.btn2{
    transition: all .2s ease-in-out;
    visibility:visible;
    opacity:1;
    position: absolute;
    transform: scale(1.05,1.05);
    transform: translate(20px);
  }

.icon {
  color: white;
}

.icon2 {
  color: white;
  width: 26px;
  line-height: 20px;
}
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">

<div class="container">
  <a href="#" class="btn"><i class="icon fa fa-link"></i></a>
  <a href="#" class="btn2"><i class="icon2 fa fa-edit"></i></a>
</div>

Upvotes: 1

Related Questions