将鼠标悬停在 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>
最佳答案
将您的 :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>
关于css - 在按钮外时保持按钮悬停效果,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51791152/