Question

将鼠标悬停在 btn 上将触发显示：阻止；在 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，以便在从一个元素移到下一个元素时保持悬停规则。这样，当您从一个孩子移到另一个孩子时，您将保持悬停状态。

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

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

1 个答案: