hover

【STINGER PLUS2】サイドメニューのカテゴリー一覧をカスタマイズ

投稿日:

リストの一部にカーソルを当てた時にリスト全体の色が変わるようにしました。カーソルをあてると選択行が黒字かつ太字になります。

HTMLの構造を確認

追加CSS

トリガーとなる要素CSSが適用される要素
side div.ad li.cat-item:hoverside div.ad li.cat-item
side div.ad li.cat-item:hoverside div.ad li.cat-item a
side div.ad li.cat-item a:hoverside div.ad li.cat-item a

注意事項

子スタイルの設定との競合に注意してください。

上記のコードでcolor属性!importantをつけているのは、子スタイルの設定が適用されないようにするためです。!importantがないとaタグの文字色に子スタイルの設定が適用されてしまいます。

子スタイルの設定確認方法

外観 > カスタマイズ > [+] 各テキストとhタグ(見出し)> 全てのリンクテキスト

参考

hover時に別の要素のデザインを変更するCSS - LESS

-STINGER PLUS2

Copyright© LESS , 2019 All Rights Reserved Powered by STINGER.