时间戳

首页 > 解决方案 > CSS边框半径设置为悬停和悬停过渡1s

html - CSS边框半径设置为悬停和悬停过渡1s

问题描述

我有一个按钮。在悬停时增加它的宽度并改变边界半径，过渡为 1s。但是在使用初始值（在本例中为 50%）设置的边界半径上立即悬停。我想等待 1 秒，然后在悬停时将边框半径设置为 50%。

.profile-avatar-change {
  font-size: 1.8rem;
  color: #ffffff;
  background: linear-gradient(#fd1999, #a60fe7);
  border-radius: 50%;
  padding: 5px;
}

.profile-avatar-change:hover {
  border-radius: 6px;
}

.profile-avatar-change:hover .hover-text {
  opacity: 1;
  width: auto;
  max-width: 50rem;
}

.profile-avatar-change .hover-text {
  position: relative;
  white-space: nowrap;
  display: inline-block;
  visibility: none;
  width: auto;
  max-width: 0px;
  opacity: 0;
  text-align: center;
  transition: all 1s;
}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

<a src="https://codepen.io/robin3317/pen/zYYwxEB/license">MIT License</a> <br><br>

<a class="profile-avatar-change" href="#">
  <i class="fa fa-pencil"></i>
  <span class="hover-text">Edit Profile Picture</span>
</a>

这是codepen演示（我使用SCSS作为CSS pre）

标签： htmlcss

解决方案

您可以添加一个延迟为 1 秒的转换，该转换在项目未悬停时运行：

.profile-avatar-change:not(:hover) {
  transition: border-radius 1s 1s;
}

演示：

.profile-avatar-change {
  font-size: 1.8rem;
  color: #ffffff;
  background: linear-gradient(#fd1999, #a60fe7);
  border-radius: 50%;
  padding: 5px;
}

.profile-avatar-change:hover {
  border-radius: 6px;
}

.profile-avatar-change:not(:hover) {
  transition: border-radius 1s 1s;
}

.profile-avatar-change:hover .hover-text {
  opacity: 1;
  width: auto;
  max-width: 50rem;
}

.profile-avatar-change .hover-text {
  position: relative;
  white-space: nowrap;
  display: inline-block;
  visibility: none;
  width: auto;
  max-width: 0px;
  opacity: 0;
  text-align: center;
  transition: all 1s;
}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

<a src="https://codepen.io/robin3317/pen/zYYwxEB/license">MIT License</a> <br><br>

<a class="profile-avatar-change" href="#">
  <i class="fa fa-pencil"></i>
  <span class="hover-text">Edit Profile Picture</span>
</a>

推荐阅读