マウスオーバーCSS問題（後に不透明度を適用するCSS）

Question

Googleアイコン、Instagram、Facebookアイコンの上にマウスを重ねると、どのように消えてしまいますか？

これは、テキストが消えて元の色の状態に戻らないモバイル対応メニューでも発生しています。

サイトhopkinslawokc.com

Answer 1

ですこんにちは、あなたは不透明セットを持っていない、しかし、あなたは、アイコンの上にカーソルを置くならば、彼不透明だより。 li> idに不透明感を与えるならば。その李ID = "メニュー項目-40不透明度：0.35;

Answer 2

// Social Hover 
 
\t jQuery(".social-icon").hover(function(){ 
 
\t \t jQuery(this).animate({ opacity: 0.35 }, 150); 
 
\t }, function(){ 
 
\t \t jQuery(this).animate({ opacity: 1 }, 150); 
 
\t }); 
 

 
/* this bit of code was found in 
 
http://hopkinslawokc.com/wp-content/themes/goodspace-v1-11/javascript/gdl-scripts.js 
 
*/

ul { 
 
    list-style: none; 
 
    font-size: 36px; 
 
} 
 

 
ul li { 
 
    float: left; 
 
    margin-right: 20px; 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 

 
<ul> 
 
    <li class="social-icon"> 
 
    <i class="fa fa-facebook"></i> 
 
    </li> 
 
    <li class="social-icon"> 
 
    <i class="fa fa-twitter"></i> 
 
    </li> 
 
    <li class="social-icon"> 
 
    <i class="fa fa-google"></i> 
 
    </li> 
 
</ul>

最初の答えが言った...あなたはそれから色あせ表示させたい場合を除き、期待と同じように働いていますその後、あなたはCSSでそれを追加する必要があり行く得る。

Answer 3

これが唯一の解決策CSSです。

ul { 
 
     list-style: none; 
 
     font-size: 36px; 
 
    } 
 

 
ul li { 
 
     float: left; 
 
     margin-right: 20px; 
 
     opacity:.35; 
 
     transition: all 150ms linear; 
 
    } 
 
ul li:hover{opacity:1;} 
 
.fa-facebook{color:blue;} 
 
.fa-twitter{color:#2b2626;} 
 
.fa-google{color:#ff0000;}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 

 
<ul> 
 
    <li class="social-icon"> 
 
    <i class="fa fa-facebook"></i> 
 
    </li> 
 
    <li class="social-icon"> 
 
    <i class="fa fa-twitter"></i> 
 
    </li> 
 
    <li class="social-icon"> 
 
    <i class="fa fa-google"></i> 
 
    </li> 
 
</ul>