ホバー問題、クロム

Question

こんにちは私はChromeとサファリ（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/