歌剧中的悬停问题，chrome

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/

歌剧中的悬停问题，chrome

hover issue in opera , chrome

icons

href

hover