クラス内のリンクにホバーを設定します

Question

クラス内のリンクに：ホバーを設定しようとしています。最初に私は、私が過去discusssionを見て、解決策を試してください

.link{ 
color: #e62739; 
} 

を試してみました

.opener a.link:hover { 
    color: #e62739; 
} 

を提案したが、それはうまくいきませんでした。私の間違いはどこにあるのか分かりません。

.link{text-decoration:none; color:white;} 
 

 
.opener a.link:hover { 
 
    color: #e62739; 
 
} 
 

 
.row { 
 
    display: flex; /* equal height of the children */ 
 
} 
 

 
.col { 
 
    flex: 1; /* additionally, equal width */ 
 
    
 
    padding: 1em; 
 
    border: solid; 
 
} 
 

 
div {font-family:'Varela Round'; 
 
} 
 
    
 
    .opener { 
 
    background-color: #07183d; 
 
    border: none; 
 
    color: white; 
 
    padding: 15px 32px; 
 
    text-align: center; 
 
    text-decoration: none; 
 
    display: inline-block; 
 
    font-size: 16px; 
 
    border: 1px white solid; 
 
} 
 

 
.benefits { 
 
    background-color: #07183d; 
 
    border: none; 
 
    color: white; 
 
    padding: 15px 32px; 
 
    text-decoration: none; 
 
    display: inline-block; 
 
    font-size: 16px; 
 
    width:300px; 
 
} 
 

 
a { 
 
    text-decoration: none; 
 
} 
 

 
#upbutton { 
 
    border: 1px dotted white; 
 
}

<div class="row"> 
 
<div class="opener col" style="padding-left: 10px;padding-right: 10px;"><a class="link" href="www.google.com" name="1" onclick=" show('1');" style="color: white;font-size: 14px;">SOCIETES: 400</a> 
 
<div class="benefits" id="b1" style="display: none; color: white; font-size: 14px;">Part SBF 120 : 120<br /> 
 
Part Filiales +100M€: 280 
 
<div id="upbutton"><a onclick=" hide('1');">fermer</a></div> 
 
</div> 
 
</div>

Answer 1

問題は、リンク上で持っているインラインスタイリングです：color: white;。

これは、CSSファイルに追加しているスタイリングよりも優先されます。インラインスタイルからそれを削除すると、ホバーカラーが機能します。

デフォルトで白い色が必要な場合は、インラインではなくスタイルシートに追加します。例：

.link { 
color: white; 
}