1

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

附加功能：有没有办法在鼠标悬停时让圆圈跳动？是否需要 jquery 或 javascript？

例子 ： //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>
4

4 回答 4

1

在您的跨度样式集中：

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

并删除text-indent: -9000px;

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

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

演示

如果您希望圆圈跳动，请考虑使用动画（MDN 文档）进行悬停，而不是简单的过渡。

于 2013-09-01T19:12:13.797 回答
0

HTML

<a class="circle"></a>

CSS

.circle {
    position: relative;
    width: 100px;
    height: 100px;
    margin: 50px auto;
    background: #bada55;
    display: block;
    border-radius: 50%;
    -webkit-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}

.circle:after {
    content: "Hover Here";
    position: absolute;
    width: 100%;
    text-align: center;
    top: 40%;
}
.circle:hover {
    -webkit-transform: scale(1.5);
    transform: scale(1.5);
    background: #82983b;
}
.circle:hover:after {
    content: "";
}

演示

目前，这只是在悬停时缩放并改变颜色。你说的脉动是什么意思——有点像这样？脉动 w/ 关键帧

于 2013-09-01T19:32:57.527 回答
0

可以使用 CSS3 使其纯粹通过 CSS 跳动animations。在这里了解更多。

JSfiddle：http: //jsfiddle.net/Q3gMS/1/

HTML：

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

CSS：

.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;
    border-radius: 23px;
    cursor: pointer;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
    filter: alpha(opacity=90);
    opacity: 0.9;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-background-size: 17px 25px;
    -moz-background-size: 17px 25px;
    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 p {
    display: block;
    height: 70px;
    width: 70px;
    line-height: 70px;
    text-align: center;
    margin: 0;
    padding: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    opacity: 1;
    -webkit-transition: opacity 0.2s ease-out;
    -moz-transition: opacity 0.2s ease-out;
    -o-transition: opacity 0.2s ease-out;
    -ms-transition: opacity 0.2s ease-out;
    transition: opacity 0.2s ease-out;
}
.cn-nav a:hover p {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    opacity: 0;
}
.cn-nav a:hover span {
    -webkit-animation: pulsate 1s infinite;
    -moz-animation: pulsate 1s infinite;
    -ms-animation: pulsate 1s infinite;
    -o-animation: pulsate 1s infinite;
    animation: pulsate 1s infinite;
}
@keyframes "pulsate" {
 0% {
    background-color: #a8872d;
 }
 50% {
    background-color: red;
 }
 100% {
    background-color: #a8872d;
 }
}
@-moz-keyframes pulsate {
 0% {
   background-color: #a8872d;
 }
 50% {
   background-color: red;
 }
 100% {
   background-color: #a8872d;
 }
}
@-webkit-keyframes "pulsate" {
 0% {
   background-color: #a8872d;
 }
 50% {
   background-color: red;
 }
 100% {
   background-color: #a8872d;
 }
}
@-ms-keyframes "pulsate" {
 0% {
   background-color: #a8872d;
 }
 50% {
   background-color: red;
 }
 100% {
   background-color: #a8872d;
 }
}
@-o-keyframes "pulsate" {
 0% {
   background-color: #a8872d;
 }
 50% {
   background-color: red;
 }
 100% {
   background-color: #a8872d;
 }
}
.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;
    -webkit-background-size: 100% 100%;
    -moz-background-size: 100% 100%;
    background-size: 100% 100%;
    background-position: center center;
    background-repeat: no-repeat;
    margin: 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;
    border-radius: 50px;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
    filter: alpha(opacity=60);
    opacity: 0.6;
    margin: -50px 0 0 -50px;
    -webkit-background-size: 22px 32px;
    -moz-background-size: 22px 32px;
    background-size: 22px 32px;
    background-color: #a8872d;
}
.cn-nav a:hover div {
    width: 90px;
    height: 90px;
    -webkit-background-size: 120% 120%;
    -moz-background-size: 120% 120%;
    background-size: 120% 120%;
    margin: -45px 0 0 -45px;
    border-radius: 45px;
}
于 2013-09-01T19:13:03.767 回答
0

我看不到您使用哪种图片作为背景图片，但我知道如何将文本放置在圆圈内并将其隐藏在悬停时。我想我会使用伪元素来解决这个问题，因为您可以将文本放在链接中并将其居中。在悬停时，您可以只放置 opacity: 0 或清空内容（内容：“”；）

我确实简化了标记，只是为了向您展示如何使用伪元素解决它。

http://dabblet.com/gist/6406590

于 2013-09-01T19:15:24.807 回答