如何使用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

你需要这样的东西吗？

Demo

A better looking demo

You can use a white border too

Demo with transitions

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属性

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

Answer 2

将这两个图像转换为单个图像，并通过在悬停时更改background-position来使用CSS精灵技术。多数民众赞成。

Answer 3

至于背景变化：

div {
background: url(image.png);
}

div:hover {
background: url(hoverimage.png);
}

Answer 4

您可以使用border-radius

执行此操作

演示http://jsfiddle.net/fYfwH/