javascript - 用里面的文字创建 CSS3 圆圈

Question

我正在尝试在 CSS3 圆圈内添加文本。但是文字超出了圆圈的比例。当我将鼠标悬停在圆圈上时，它会改变颜色，但我也希望文本也消失。

附加功能:有没有一种方法可以让圆圈在鼠标悬停时跳动？是否需要 jquery 或 javascript？

示例:http://jsfiddle.net/jqEzZ/2/

<style>

.cn-nav > a{
position: absolute;
top: 0px;
height: 70px;
width: 70px;
}
a.cn-nav-prev{
left: 0px;
}
a.cn-nav-next{
right: 0px;
}

.cn-nav a span{
width: 46px;
height: 46px;
display: block;
text-indent: -9000px;
-moz-border-radius: 23px;
-webkit-border-radius: 23px;
border-radius: 23px;
cursor: pointer;
opacity: 0.9;
position: absolute;
top: 50%;
left: 50%;
background-size: 17px 25px;
margin: -23px 0 0 -23px;
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
-ms-transition: all 0.4s ease;
transition: all 0.4s ease;
}

.cn-nav a.cn-nav-prev span{
background: #666 url(../images/prev.png) no-repeat center center;
}

.cn-nav a div{
width: 0px;
height: 0px;
position: absolute;
top: 50%;
left: 50%;
overflow: hidden;
background-size: 100% 100%;
background-position: center center;
background-repeat: no-repeat;
margin: 0px;
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
border-radius: 0px;
-webkit-transition: all 0.2s ease-out;
-moz-transition: all 0.2s ease-out;
-o-transition: all 0.2s ease-out;
-ms-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
}

.cn-nav a:hover span{
width: 100px;
height: 100px;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
opacity: 0.6;
margin: -50px 0 0 -50px;
background-size: 22px 32px;
background-color:#a8872d;
}

.cn-nav a:hover div{
width: 90px;
height: 90px;
background-size: 120% 120%;
margin: -45px 0 0 -45px;
-moz-border-radius: 45px;
-webkit-border-radius: 45px;
border-radius: 45px;
}

</style>

HTML

<div class="cn-nav">
<a href="#" class="cn-nav-prev">
<span>Previous</span>
<div style="background-image:url(images/1.jpg);"></div>
</a>
</div>

Answer 1

在您的 span 样式集中:

.cn-nav a span {
    overflow: hidden;
    ….
}

并删除 text-indent: -9000px;

要使文本消失，请将颜色设置为悬停时的背景色:

.cn-nav a:hover span {
    ...
    background-color:#a8872d;
    color: #a8872d;
}

Demo

如果你想让圆圈跳动，看看使用动画 (MDN Docs)用于悬停而不是简单的过渡。