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

タグ: Lightning PRO, Lightning Skin Variety, タグクラウド, 文字色

このトピックには8件の返信、2人の参加者があり、最後にd-chirashiにより5年、 3ヶ月前に更新されました。

9件の投稿を表示中 - 1 - 9件目 (全9件中)

投稿者

投稿
2019年8月11日 5:05 PM #18500
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だけ反映されません。
よろしくお願いいたします。
2019年8月11日 6:09 PM #18502
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編集後に諸々のキャッシュを削除しましたか？
2019年8月13日 6:36 AM #18583

d-chirashi
参加者

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

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

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

2019年8月13日 9:27 AM #18588

DRILL LANCER
モデレーター

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

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

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

2019年8月14日 6:53 AM #18643
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が編集しました。
2019年8月14日 4:56 PM #18682
d-chirashi
参加者
RICK様

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

Varietyの初期設定では
```
.siteFooter {
    background-color: #000;  
}
```
でしたが、#fffに変更しました。
background-color: #000; に戻して検証したところ、
a:hoverでタグのテキストカラーが#888から少し明るくなる設定になっているようです。
2019年8月14日 6:12 PM #18688
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;
}
```
2019年8月15日 7:23 AM #18706
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の場合だけでしょうか。

↑これは質問ではありません。ご報告まで。
2019年8月15日 9:55 AM #18713

DRILL LANCER
モデレーター

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

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

投稿