タグクラウドウィジットのa:hover

[d-chirashi]

lightning pro child　ユーザーです。
フッターエリアにタグクラウドウィジットを配置したのですが、
なぜかa:hoverで文字が消えてしまいます。

.tagcloud a:link {
  color: #1111CC;
　text-decoration: none;
}
 
.tagcloud a:visited {
  color: #006064;
　text-decoration: none;
}
.tagcloud a:hover {
 color:#12aab1;
text-decoration: none;
}

上記カスタムcssのa:hoverだけ反映されません。
よろしくお願いいたします。

[DRILL LANCER]

フッターエリアにタグクラウドウィジットを配置したのですが

.tagcloud a:link {
	color: #1111CC;
	text-decoration: none;
} 
.tagcloud a:visited {
	color: #006064;
	text-decoration: none;
}
.tagcloud a:hover {
	color:#12aab1;
	text-decoration: none;
}

フッターエリアの背景色に#12aab1が設定されていませんか？
また、CSS編集後に諸々のキャッシュを削除しましたか？

[d-chirashi]

>フッターエリアの背景色に#12aab1が設定されていませんか？
>また、CSS編集後に諸々のキャッシュを削除しましたか？

フッターエリアの背景色は#fffに設定しています。
ブラウザーのキャッシュは都度削除しながら確認しました。

その後、色々とトライしたのですが、問題解決には至っていません。
気づいたことは、正確には「a:hoverで文字が消えてしまう」のではなく、
「a:hoverで文字が読めないほど薄くなる」です。
a:hoverでわずかに文字が見えました。
tagcloudエリアのみの現象です。

[DRILL LANCER]

.tagcloud aのbackground-colorに#12aab1に近い色が設定されているのでしょう。

こういう問題は実際にどうなっているのか見てみないと具体的な回答ができないので
差し支えなければあなたのサイトのURLをご提示していただけたら幸いです。

もしくは、新規にサイトを作成してデモデータをインポートして同様のカスタマイズを施し
そのサイトのURLを提示するのも手だと思います。

[DRILL LANCER]

こちらの問題はこちらで解決したほうがいいので・・・
今回の件では Lightning Pro + Lightning Skin Variety のときに発生するようです。
クラスの指定を下記のようにするとうまくいくと思われます。

footer.siteFooter .widget.widget_tag_cloud .tagcloud a:link {
	color: #1111CC;
	text-decoration: none;
} 
footer.siteFooter .widget.widget_tag_cloud .tagcloud a:visited {
	color: #006064;
	text-decoration: none;
}
footer.siteFooter .widget.widget_tag_cloud .tagcloud a:hover {
	color:#12aab1;
	text-decoration: none;
}

• この返信は5年、 3ヶ月前にDRILL LANCERが編集しました。

[d-chirashi]

RICK様

お世話になっております
ご提示のCSSを貼り付けましたが、状況変化はありませんでした。
ightning Pro + Lightning Skin Variety で発生する不具合なのですね。

Varietyの初期設定では

.siteFooter {
    background-color: #000;  
}

でしたが、#fffに変更しました。
background-color: #000; に戻して検証したところ、
a:hoverでタグのテキストカラーが#888から少し明るくなる設定になっているようです。

[DRILL LANCER]

私の環境では反映されたコードを掲載しているので・・・
多分設定した後諸々のキャッシュを削除していないのが原因ではないかと・・・
設定したあとはプラグイン・サーバー・ブラウザのキャッシュを必ず削除するようにしてください。

P.S.
とりあえず、サイドバーに設置したのにも対応できるよう作り直してみました。

.widget_tag_cloud .tagcloud a:link,
footer.siteFooter .widget.widget_tag_cloud .tagcloud a:link {
	color: #1111CC;
	text-decoration: none;
}

.widget_tag_cloud .tagcloud a:visited,
footer.siteFooter .widget.widget_tag_cloud .tagcloud a:visited {
	color: #006064;
	text-decoration: none;
}

.widget.widget_tag_cloud .tagcloud a:hover,
footer.siteFooter .widget.widget_tag_cloud .tagcloud a:hover {
	color:#12aab1;
	text-decoration: none;
}

[d-chirashi]

RICK様

度々の回答をいただきありがとうございます。
おかげさまで下記の設定で解決することができました。

footer.siteFooter .widget .tagcloud a:hover {
    color: #ea2e49;
	  opacity:1.0;
}

文字が薄くなるのは、opacityも関係していたようです。

上記cssをExUnit>cssカスタマイズに記述すると反映されませんでした。
子テーマの追加cssに記述して反映されました。
VK Plugin Beta Testerを導入しています。
この現象もLightning Skin Varietyの場合だけでしょうか。

↑これは質問ではありません。ご報告まで。

[DRILL LANCER]

私が前のレスをするときに見た際にはDevelopper Toolで見られるCSSにすらカスタマイズしたはずの内容が反映されていなかったのでキャッシュの問題だと判断しました。
おそらく、この十数時間の間にキャッシュの有効期限が切れて反映されるようになったのでしょう。

!importantはともかくとしてopacity:1.0;は不要なように思えます。

[投稿者]

投稿