如何获得这个悬停效果与CSS [英] How to get this hover effect with just CSS
问题描述
>
我已经有圆圈部分。我在div上设置了一个黑色的背景颜色。并为文本,我设置:悬停为显示的颜色。
I've already got the circle part. I set a background color of black on the div. and for the text, I set a:hover as the color shown. I just can't figure out how do I set a:hover for the div as well just for that amount of circumference.
这里是我的代码:
HTML:
<a class="cirlink" href="http://www.somesite.com">
<div class="circle">
<h2 class="textcolor">click<br> here</h2>
</div>
</a>
CSS:
.circle
{
border-radius: 125px;
width:250px;
height:250px;
background-color:black;
margin:auto;
text-align:center;
}
.textcolor:hover
{
transition:1s;
color:#FF4800;
}
此外,有什么方法可以更改悬浮的div的背景图片?
Also, is there any way to change the background image of a div on hover?
推荐答案
你需要这样的东西吗?
div {
height: 100px;
width: 100px;
border-radius: 50%;
border: 10px solid transparent;
color: #fff;
background: #515151;
}
div:hover {
border: 10px solid #FF4800;
color: #FF4800;
}
我有一个带有透明边框的固定宽度的元素,在悬停时移动,你也可以设置元素边框以匹配背景颜色,最后但不是最少,在悬停时,我只需将边框颜色更改为#FF4800
,我也添加了转换示例,如果你想要平滑的悬停
。
Am having a fixed width element with a transparent border, so that my element doesn't move on hover, you can also set the elements border to match the background color, and last but not the least, on hover, I simply change the border color to #FF4800
, I've also added transition example, if you want smoothness on hover
.
不想让元素 background-color
跨越更多 10px
,因为透明边框,设置 border-color
以匹配背景颜色,可以像这样使用CSS content
属性
Still if you don't want the elements background-color
to span more 10px
because of the transparent border, and you do not want to set the border-color
to match the background color, you can use CSS content
property like this
演示 ( content
with :after
pseudo)
Demo (content
with :after
pseudo)
div {
height: 100px;
width: 100px;
border-radius: 50%;
color: #fff;
background: #515151;
text-align: center;
line-height: 100px;
font-size: 20px;
font-family: Arial;
position: relative;
margin: 30px;
}
div:hover:after {
border: 10px solid #FF4800;
color: #FF4800;
}
div:after {
content: "";
display: block;
height: 100px;
width: 100px;
position: absolute;
left: -10px;
top: -10px;
border: 10px solid transparent;
border-radius: 50%;
}
这篇关于如何获得这个悬停效果与CSS的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!