在按钮外保持按钮悬停效果

Question

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

我以为我可以通过在 btn 上使用边距来做到这一点，但那不起作用。

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 标记，以便在从一个元素移动到下一个元素时保持悬停规则。这样，您在从一个孩子移动到另一个孩子时保持悬停状态。

我还将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>