Question

为什么不对文本和咖啡杯中的悬停效果进行CSS3过渡，为什么咖啡杯底部有白色边框？我想去掉杯子底部的边框。

我在整个事物中使用了Awesome Icon字体。

这里是DEMO。这是我的代码：

＆＃13;

body {
    background: #000;
}

.contactbutton {
    border: 1px solid #FFF;
    height: 50px;
    margin-top: 50px;
    border-radius: 5px;
    text-align: center;
    padding: 10px;
    font-weight: 700;
    font-size: 20px;
    background: transparent;
}

.contactbutton a,
.contactbutton a:link,
.contentbutton a:visited {
    color: #FFF;
}

.contactbutton i {
    display: none;
    -webkit-transition: all 1s ease 0s;
    -moz-transition: all 1s ease 0s;
    -o-transition: all 1s ease 0s;
    transition: all 1s ease 0s;
}

.contactbutton a b {
    -webkit-transition: all 1s ease 0s;
    -moz-transition: all 1s ease 0s;
    -o-transition: all 1s ease 0s;
    transition: all 1s ease 0s;
}

.contactbutton a:hover i {
    display: block;
    -webkit-transition: all 1s ease 0s;
    -moz-transition: all 1s ease 0s;
    -o-transition: all 1s ease 0s;
    transition: all 1s ease 0s;
}

.contactbutton a:hover b {
    display: none;
    -webkit-transition: all 1s ease 0s;
    -moz-transition: all 1s ease 0s;
    -o-transition: all 1s ease 0s;
    transition: all 1s ease 0s;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="contactbutton"><a href="#contact"><i class="fa fa-coffee fa-2x"></i></i><b>Talk.</b></a></div>

＆＃13;

Answer 1

试试这个：http://jsfiddle.net/inkedraskal/5g95efau/

而是将其中一个元素置于绝对位置并使用＆＃34;不透明度＆＃34;在悬停上的2之间转换

body {
    background: #000;
}

.contactbutton {
    border: 1px solid #FFF;
    height: 50px;
    margin-top: 50px;
    border-radius: 5px;
    text-align: center;
    padding: 10px;
    font-weight: 700;
    font-size: 20px;
    background: transparent;
    position: relative;
}

.contactbutton a,
.contactbutton a:link,
.contentbutton a:visited {
    color: #FFF;
}

.contactbutton i {
    opacity: 0;
    -webkit-transition: all 1s ease 0s;
    -moz-transition: all 1s ease 0s;
    -o-transition: all 1s ease 0s;
    transition: all 1s ease 0s;
}

.contactbutton a b {
    -webkit-transition: all 1s ease 0s;
    -moz-transition: all 1s ease 0s;
    -o-transition: all 1s ease 0s;
    transition: all 1s ease 0s;
      position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  height: 25px;
  margin: auto;
}

.contactbutton a:hover i {
    opacity: 1;
    -webkit-transition: all 1s ease 0s;
    -moz-transition: all 1s ease 0s;
    -o-transition: all 1s ease 0s;
    transition: all 1s ease 0s;
}

.contactbutton a:hover b {
    opacity: 0;
    -webkit-transition: all 1s ease 0s;
    -moz-transition: all 1s ease 0s;
    -o-transition: all 1s ease 0s;
    transition: all 1s ease 0s;
}

Answer 2

您无法为display属性设置动画。白色边框是浏览器应用于锚标签的默认文本下划线。

Awesome Icon字体和文本悬停中的CSS3过渡

2 个答案: