如何解决在将鼠标悬停在Bootstrap按钮图标上时显示半圆效果
我一直试图获取按我想要的方式设计的按钮的悬停属性。 Google无法帮助我。下面的图片展示了我正在努力实现的目标。
我在这里尝试过一些操作:https://jsfiddle.net/w32fxspr/4/ 但是我最终得到了奇怪的结果。
i{
padding-left: 20px;
}
a{
margin: 20px;
background-color: #007843 !important;
}
.custom i:hover{
border-radius: 50%;
background-color: rgba(255,255,0.59) !important;
padding: 20px;
position: absolute;
margin-left: -20px;
margin-top: -20px;
transition: .1s ease;
}
<!DOCTYPE html>
<html>
<head>
<title>Button</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog==" crossorigin="anonymous" />
</head>
<body>
<a href="#" class="btn btn-primary custom">
CONTACT US <i class="fa fa-angle-right"></i>
</a>
</body>
</html>
解决方法
您可以使用:before
伪元素为按钮添加悬停效果,我们将使用绝对定位将其放置在悬停按钮上:
.custom {
position: relative;
overflow: hidden;
border: none!important;
}
.custom:before {
content: " ";
display: block;
height: 80px;
width: 80px;
border-radius: 50%;
background-color: rgba(255,255,0.30) !important;
position: absolute;
right: -80px;
top: -22px;
transition: .1s ease;
}
.custom:hover:before {
right: -45px;
}
/* Your existing CSS */
i { padding-left: 20px; }
a{ margin: 20px; background-color: #007843 !important; }
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" />
<a href="#" class="btn btn-primary custom">
CONTACT US <i class="fa fa-angle-right"></i>
</a>
工作原理:
- 我们按下按钮(
.custom
)position: relative;
,以便我们可以使用绝对位置将元素放置在其上。我们还添加了overflow: hidden;
,仅将效果包含在按钮内。 - 我们将
.custom:before
设为包含半透明圆的块元素,并使用绝对定位将其放置在我们想要的位置。 - 首先,使用
right: -80px;
将圆圈定位在按钮的最右边,这样它就不可见了。 - 然后将鼠标悬停在按钮
.custom:hover:before
上,我们更改right: -45px;
以便显示圆圈。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。