VWSとは フォーラム Lightning [ 解決済 ] タグクラウドウィジットのa:hover

[ 解決済 ] タグクラウドウィジットのa:hover

このトピックには8件の返信が含まれ、2人の参加者がいます。2 ヶ月、 1 週前 RICK さんが最後の更新を行いました。

9件の投稿を表示中 - 1 - 9件目 (全9件中)
  • 投稿者
    投稿
  • #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だけ反映されません。
    よろしくお願いいたします。

    #18502

    RICK
    参加者

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

    .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編集後に諸々のキャッシュを削除しましたか?

    #18583

    d-chirashi
    参加者

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

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

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

    #18588

    RICK
    参加者

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

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

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

    #18643

    RICK
    参加者

    こちらの問題はこちらで解決したほうがいいので・・・
    今回の件では 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;
    }
    • この返信は2 ヶ月、 1 週前に  RICK さんが編集しました。
    #18682

    d-chirashi
    参加者

    RICK様

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

    Varietyの初期設定では

    .siteFooter {
        background-color: #000;  
    }

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

    #18688

    RICK
    参加者

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

    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;
    }
    #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の場合だけでしょうか。

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

    #18713

    RICK
    参加者

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

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

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

このトピックに返信するにはログインが必要です。