divの上にマウスを置くと、アンカーテキストの色が変わります

Question

私は大学のプロジェクトに取り組んでいます。私は自分のCSSに問題があったので、私は問題を探り、answerを得ました。このコードは私の問題を解決しました。私の質問は、同じ出力を得る他の方法はありますか？私は同じ結果を得るためにCSSを使う方法がたくさんあることを意味します。私はjQuery/JavaScriptを使いたくありません。もしそうなら、私に知らせてください。

.more_games{ 
 
    background-color: #F1F1F1; 
 
    margin-left: 12px; 
 
    margin-right: 12px; 
 
    border-radius: 5px; 
 
    margin-bottom: -14px; 
 
} 
 
.more_games h4{ 
 
    text-align: center; 
 
    line-height: 29px; 
 
    font-family: "Times New Roman", Georgia, Serif; 
 
    color: red; 
 
} 
 
.more_games:hover{ 
 
    background: -webkit-repeating-linear-gradient(#74ABDD, #74ABDD 49.9%, #498DCB 50.1%, #498DCB 100%); 
 
    background: -o-repeating-linear-gradient(#74ABDD, #74ABDD 49.9%, #498DCB 50.1%, #498DCB 100%); 
 
    background: -moz-repeating-linear-gradient(#74ABDD, #74ABDD 49.9%, #498DCB 50.1%, #498DCB 100%); 
 
    background: repeating-linear-gradient(#74ABDD, #74ABDD 49.9%, #498DCB 50.1%, #498DCB 100%); 
 
    border-radius: 5px; 
 
} 
 
.more_games:hover h4 a{ 
 
\t color: #fff; 
 
}

<div class="more_games"> 
 
    <h4><a href="#">More Games</a></h4> 
 
</div>

Answer 1

あなたはアンカーと見出しがその親によって色を継承することができます。

.more_games a { 
 
    color: inherit; 
 
} 
 
.more_games{ 
 
    color: red; 
 
    background-color: #F1F1F1; 
 
    margin-left: 12px; 
 
    margin-right: 12px; 
 
    border-radius: 5px; 
 
    margin-bottom: -14px; 
 
} 
 
.more_games h4{ 
 
    text-align: center; 
 
    line-height: 29px; 
 
    font-family: "Times New Roman", Georgia, Serif; 
 
} 
 
.more_games:hover{ 
 
    color: #fff; 
 
    background: -webkit-repeating-linear-gradient(#74ABDD, #74ABDD 49.9%, #498DCB 50.1%, #498DCB 100%); 
 
    background: -o-repeating-linear-gradient(#74ABDD, #74ABDD 49.9%, #498DCB 50.1%, #498DCB 100%); 
 
    background: -moz-repeating-linear-gradient(#74ABDD, #74ABDD 49.9%, #498DCB 50.1%, #498DCB 100%); 
 
    background: repeating-linear-gradient(#74ABDD, #74ABDD 49.9%, #498DCB 50.1%, #498DCB 100%); 
 
    border-radius: 5px; 
 
}

<div class="more_games"> 
 
\t \t <h4><a href="#">More Games</a></h4> 
 
</div>