[英]Circle around div when hover
I have a sun shape div. 我有一个太阳形div。 I just want to show a border when hover it with transparent gap between hover border and object.
我只想在悬停边框和对象之间的透明间隙悬停时显示边框。
First I tried with box shadow but cant make white gap. 首先,我尝试使用盒子阴影,但不能产生白色间隙。 It requires solid color, then I tried with this way.
它需要纯色,然后我尝试这种方式。 But the gap is not appearing.
但差距并没有出现。
Here is my code. 这是我的代码。
.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>
What am I missing here? 我在这里错过了什么?
The solution is 'background-clip' found here: 解决方案是在这里找到的'background-clip':
https://css-tricks.com/transparent-borders-with-background-clip/ https://css-tricks.com/transparent-borders-with-background-clip/
With it you can prevent the background color from flowing under the border and padding. 有了它,您可以防止背景颜色在边框和填充下流动。 It is widely supported:
它得到广泛支持:
https://caniuse.com/#search=background-clip https://caniuse.com/#search=background-clip
so your CSS would become: 所以你的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;
}
See: https://jsfiddle.net/auzjv4rp/11 请参阅: https : //jsfiddle.net/auzjv4rp/11
Or why not have a double border? 或者为什么没有双边框?
See: https://jsfiddle.net/auzjv4rp/13 请参阅: https : //jsfiddle.net/auzjv4rp/13
.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.. 尝试这个..
Try this 尝试这个
.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>
Fiddle: https://jsfiddle.net/fpow9ahc/ 小提琴: https : //jsfiddle.net/fpow9ahc/
You can implement like using :before
property. 您可以像使用
:before
属性一样实现。 Add following CSS and try: 添加以下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;
}
See JSfiddle : https://jsfiddle.net/qsb6y0rc/75/ 见JSfiddle: https ://jsfiddle.net/qsb6y0rc/75/
You can create the sun
element with background-color
, shadow
and border
with width: 0
您可以使用
width: 0
background-color
, shadow
和border
创建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;
}
Then on hover, just animate the border-width
: 然后在悬停时,只需为
border-width
设置动画:
.sun:hover {
border-width: 3px;
}
You can use css pseudo selector :after
, which size is bigger than the original element. 你可以使用css伪选择器
:after
,其大小比原始元素大。 Set this element transparent
background and the same border color as the original element like this: 设置此元素
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>
Here is an idea using radial-gradient
这是一个使用
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.