如何使用CSS获得此悬停效果

Question

我已经有了圈子部分.我在div上设置了黑色的背景颜色.对于文本,我设置了:悬停为显示的颜色.我只是无法弄清楚如何设置一个:将鼠标悬停在div上以及周长量.

这是我的代码:

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的背景图像？

Answer 1

你需要这样的东西吗？

演示

一个更好看的演示

您也可以使用白色边框

演示与过渡

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,我还添加了转换示例,如果你想要悬停平滑.

如果由于透明边框而不希望元素background-color跨越更多10px,并且您不希望将其设置border-color为与背景颜色匹配,则可以使用这样的CSS content属性

演示(content与:after伪)

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%;
}