悬停在 Bootstrap 按钮图标上时显示半圆形效果
Posted
技术标签:
【中文标题】悬停在 Bootstrap 按钮图标上时显示半圆形效果【英文标题】：Show semi-circle effect on hovering over Bootstrap button icon 【发布时间】：2021-01-19 06:56:05 【问题描述】：我一直在尝试按我想要的方式设计按钮的悬停属性。谷歌无法帮助我。下面的图片展示了我想要实现的目标。
我在这里尝试过：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, 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>【问题讨论】：
【参考方案1】：您可以使用: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, 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; 以显示圆圈。
【讨论】：
以上是关于悬停在 Bootstrap 按钮图标上时显示半圆形效果的主要内容，如果未能解决你的问题，请参考以下文章
bootstrap 4，光标悬停在按钮上时不会改变，但在锚点上会改变
当我使用 jquery 将鼠标悬停在图标上时如何显示一个简单的文本框