Question

你好我有chrome和safari的问题（firefox似乎工作正常）我有这个HTML：

<div>
    <a target="_blank" class="newsletter" href="#"><i class="fa fa-newspaper-o"></i></a>
</div>

CSS：

.newsletter i{
    height:35px;
    width:35px;
    color:#FFFFFF;
    font-size: 18px;
    background-color: #00495e;
    border-radius: 100%;
    border:1px solid #FFFFFF;
    padding:7px;
    transition: all 0.5s;
  -moz-transition: all 0.5s; /* Firefox 4 */
  -webkit-transition: all 0.5s; /* Safari and Chrome */
  -o-transition: all 0.5s; /* Opera */
}
.newsletter i:hover{
    color:#00495e;
    background-color: #FFFFFF;
}

我无法在所有圈内盘旋，图标的位置不起作用。我的意思是，当我将鼠标移到圆圈内的图标上时，没有悬停效果并且没有出现点击图标。

Answer 1

这是：

.newsletter i {
  display:block;
  text-align: center;
  line-height:35px;
  height: 35px;
  width: 35px;
  color: #FFFFFF;
  font-size: 18px;
  background-color: #00495e;
  border-radius: 100%;
  border: 1px solid #FFFFFF;
  padding: 7px;
  transition: all 0.5s;
  -moz-transition: all 0.5s;
  /* Firefox 4 */
  -webkit-transition: all 0.5s;
  /* Safari and Chrome */
  -o-transition: all 0.5s;
  /* Opera */
}

.newsletter {
  text-decoration: none;
}

.newsletter:hover i {
  color: #00495e;
  background-color: #FFFFFF;
}

https://jsfiddle.net/Lnats6fj/

歌剧中的悬停问题，铬

1 个答案: