<a>より下の階層にある要素に:hoverを適応させる方法

こんにちは、連久実子です。

当サイトでは、構築に無料のWordPressテーマであるSimplicityを利用させていただいています。

とっても便利なんですが、一覧ページの「続きを読む」の装飾をデフォルトの状態から変えてみたところ、ちょっと悪戦苦闘しまして・・・

やりたかったのは、記事一覧の「続きを読む」の装飾。下の記事を参考にさせていただきました。

http://yukiohno.com/2015/05/simplicity-customize/

初心者でもできた！「Simplicity」でカスタマイズしたこと6つ！

WordPress初心者の僕がテーマ「Simplicity」を使っている理由という記事でも書きましたが、「Simplicity」は管理画面から変更できる項目が多くWordPress初心者でも簡単にブログを始めることができます。けど管理画面

cssはだいたいコピペさせていただいたので（笑）、次のように書きました。

.hover-card .entry-read {
 text-align: right;
 margin-right: 10px;
 text-decoration: none;
 color: #ea005b;
}
hover-card .entry-read:hover {
 color: #00afcc;
}
.entry-read:before {
margin-right: 5px;
font-family: "FontAwesome";
content: "\f138";
}

ん？これだと「続きを読む」にカーソルを合わせた時はフォント色が変わるけど、エントリーカードの他のエリアにカーソルを合わせた時は「続きを読む」のフォント色は変わりません。

下の階層にある要素じゃなく、<a>に:hoverを適応してみた

こだわりを捨てればいいのかもしれませんが・・・気になったので、cssを次のように書き直したら、フォント色が変わるようになりました。

.hover-card .entry-read {
 text-align: right;
 margin-right: 10px;
 text-decoration: none;
 color: #ea005b;
}
a.hover-card:hover .entry-read {
 color: #00afcc;
}
.entry-read:before {
margin-right: 5px;
font-family: "FontAwesome";
content: "\f138";
}

お恥ずかいのですが、ずーっと:hoverはいちばん下層の要素にしか適応できないもんだと思ってました（汗）

ちなみに、この現象、テーマのカスタマイズから「エントリーカード全体をリンク化」した場合にのみ起こるようです。いろいろお勉強になりました・・・とほほ。