css - 在按钮外时保持按钮悬停效果

Question

将鼠标悬停在 btn 上应该会触发 display: block;在 btn2 上(确实如此)，然后在我将鼠标移到 btn 下方和外部时保持此悬停效果，直到我能够单击 btn2>(目前还没有)。

我以为我可以通过在 btn 上使用 margin 来做到这一点，但是那没有用。

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>

Answer 1

将您的 :hover CSS 设置为两个元素的父 .container 标记，以便在从一个元素移动到下一个元素时保持悬停规则。通过这种方式，您可以在从一个 child 移动到另一个 child 时保持悬停状态。

我还将 display:none; 更改为 visibility:hidden; 和 opacity:0|opacity:1 分别。 `display:none' 不会显示动画。

当从一个元素移动到另一个元素时，动画时间还允许短时间的重叠(非 :focus)。通过一些关键帧，您可以使从一个到另一个的移动更清晰一些。

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>