鼠标悬停时圆形环绕div

Question

我有一个太阳形状的div。当鼠标悬停在它上面时，我只想显示一个边框，悬停边框和对象之间有透明的间隙。

起初我尝试使用盒子阴影，但无法制造出白色间隙。它需要纯色，于是我尝试了这种方法。但是间隙没有出现。

这是我的代码：

    .sun-quote-pages{
      border-radius: 50%;
        background-color: #f4953b;
        width: 4.1em;
        height: 4.1em;
        border: 2px solid transparent;
        transition: transform 0.5s ease, background 0.5s ease, box-shadow 0.5s ease;
    }
    
    .sun-quote-pages:hover {
         transform: scale(1.3);
        border: 2px solid #f4953b;
        margin: 2px;
        padding: 2px; 
    }
    
    
    .wrapper{
      margin-left:150px;
      margin-top:50px;
    }

    <div class="wrapper">
      <div class="sun-quote-pages">   
      </div> 
    </div>

我在这里错过了什么？

Jsfiddle

- Janath

Answer 1

解决方案是“background-clip”，可在此处找到：https://css-tricks.com/transparent-borders-with-background-clip/。使用它，您可以防止背景色流入边框和填充区域。它得到了广泛支持：https://caniuse.com/#search=background-clip，因此您的CSS代码将变成：

.sun-quote-pages{
  border-radius: 50%;
    background-color: #f4953b;
    width: 4.1em;
    height: 4.1em;
    padding: 2px; 
    border: 2px solid transparent;
    background-clip: content-box;
    transition: transform 0.5s ease, border 0.5s ease;
}

.sun-quote-pages:hover {
    border: 2px solid #f4953b;
    transform: scale(1.3);
}


.wrapper{
  margin-left:150px;
  margin-top:50px;
}

参见：https://jsfiddle.net/auzjv4rp/11

或者为什么不尝试使用双边框呢？

参见：https://jsfiddle.net/auzjv4rp/13

- KIKO Software

---

非常好，我不知道那个属性！谢谢。 - ReSedano

这很好，但是边框在正常状态下也是可见的。我需要只有在悬停时才有边框。 - Janath

@Janath，我已经更改了答案，所以当你悬停在上面时边框会出现。 - KIKO Software

Answer 2

.sun-quote-pages:hover {
         transform: scale(1.3);
       
    }
 .sun-quote-pages:hover::after {
        border: 2px solid #f4953b;
       
    }
 
 .sun-quote-pages{
 width: 4.1em;
 height: 4.1em;
 margin: 20px auto;
 border-style: ridge;
 border: 2px solid transparent;
 border-spacing:10px;
 border-radius: 50%;
 position:relative;
 background-color: #f4953b;
 transition: transform 0.5s ease, background 0.5s ease, box-shadow 0.5s ease;
 }
 .sun-quote-pages:after {
   content: '';
   position: absolute;
   top: -10px;
   left: -10px;
   right: -10px;
   bottom: -10px;
   border: 2px solid transparent;
   border-radius: 50%;
   }

    
    
    .wrapper{
      margin-left:150px;
      margin-top:50px;
    }

 <div class="wrapper">
      <div class="sun-quote-pages">   
      </div> 
    </div>
 <style>

Try This..

- Shazvan Hanif

Answer 3

试试这个

.sun-quote-pages{
    border-radius: 50%;
    background-color: #f4953b;
    width: 4.1em;
    height: 4.1em;
    border: 2px solid transparent;
    transition: transform 0.5s ease, background 0.5s ease, box-shadow 0.5s ease;
    position:relative;
    box-sizing: border-box;
}

.sun-quote-pages:hover {
border: solid 2px #f4953b;
  padding: 5px;
  background-clip: content-box; /* support: IE9+ */
  background-color: #f4953b;
  transform: scale(1.3);
}
.wrapper{
  margin-left:150px;
  margin-top:50px;
}

<div class="wrapper">
  <div class="sun-quote-pages">   
  </div> 
</div>

小提琴：https://jsfiddle.net/fpow9ahc/

- Ali

---

是因为边距的原因吗？ - Janath

因为有填充(padding)，我们可以为.sun-quote-pages div添加box-sizing: border-box; - Ali

Answer 4

你可以使用 CSS 伪选择器 :after，它的大小比原始元素大。将此元素设置为 transparent 背景，并与原始元素具有相同的边框颜色，如下所示：

body {
  background: gray;
}

.sun-quote-pages{
  border-radius: 50%;
  background-color: #f4953b;
  width: 70px;
  height: 70px;
  transition: transform 0.5s ease, background 0.5s ease;
}

.sun-quote-pages::after {
  content: "\00a0";
  display: block;
  background: transparent;
  height: 80px;
  width: 80px;
  border-radius: 50%;
  border:2px solid #f4953b;
  opacity: 0;
  box-sizing: border-box;
  transition: opacity 0.5s ease 0.5s;
  transform: translate(-5px,-5px);
}

.sun-quote-pages:hover {
  transform: scale(1.3);
}

.sun-quote-pages:hover::after {
  opacity: 1;
}

.wrapper{
  margin-left:150px;
  margin-top:50px;
}

<div class="wrapper">
  <div class="sun-quote-pages">   
  </div> 
</div>

- xxxmatko

Answer 5

这是一个使用radial-gradient的想法。

.sun-quote-pages {
  border-radius: 50%;
  background:
   radial-gradient(circle at center,#f4953b 54%,transparent 56%,transparent 65%,#f4953b 66%);
  background-color: #f4953b;
  width: 4.1em;
  height: 4.1em;
  border: 2px solid transparent;
  transition: transform 0.5s ease, background 0.5s ease, box-shadow 0.5s ease;
}

.sun-quote-pages:hover {
  transform: scale(1.3);
  background-color:transparent;
}

.wrapper {
  margin-left: 150px;
  margin-top: 50px;
}

<div class="wrapper">
  <div class="sun-quote-pages">
  </div>
</div>

- Temani Afif

Answer 6

你可以使用:before属性进行实现。 添加以下CSS并尝试：

.sun-quote-pages:before{
    content: "";
    position: absolute;
    top: -5px;
    right: -5px;
    bottom: -5px;
    left: -5px;  
    border-radius: 50%;
}

.sun-quote-pages:hover:before {
    border: 2px solid #f4953b;
}

请查看 JSfiddle：https://jsfiddle.net/qsb6y0rc/75/

- Jatin Patel

Answer 7

您可以使用 background-color、shadow 和 width: 0 创建 sun 元素。

<div class="sun"></div>

.sun {
    background-color: #f4953b;
    height: 80px;
    width: 80px;
    box-sizing: border-box;
    border-radius: 50%;
    box-shadow: 0 0 0 3px #f3f5f6 inset;
    border: solid 0 #f4953b;
    transition: border-width 0.3s linear;
}

然后在悬停时，只需动画化 border-width：

.sun:hover {
    border-width: 3px;
}

这是一个可运行的 演示：

- Hristo Eftimov