如何获得这个悬停效果与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

演示 （内容与：之后 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屋！