html - 如何仅使用 CSS 获得这种悬停效果

Question

我已经得到了圆圈部分。我在 div 上设置了黑色的背景颜色。对于文本，我将 a:hover 设置为显示的颜色。我只是不知道如何为 div 设置 a:hover 以及仅针对该周长。

这是我的代码：

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

我有一个带有透明边框的固定宽度元素，因此我的元素不会在悬停时移动，您还可以设置元素边框以匹配背景颜色，最后但并非最不重要的是，在悬停时，我只需更改边框color to #FF4800，我还添加了过渡示例，如果您想要悬停时的平滑度。

---

如果你不希望元素因为透明边框background-color而跨越更多10px，并且你不想设置border-color匹配背景颜色，你可以使用content这样的 CSS 属性

演示（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

你可以这样做border-radius

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

Answer 3

将这两个图像转换为一个图像，并通过更改background-position悬停来使用 CSS sprite 技术。而已。

Answer 4

至于背景变化：

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

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