エントリーカード全体にホバー色をつけたい

Simplicityの特徴 フォーラム テーマファイルのカスタマイズに関する質問など エントリーカード全体にホバー色をつけたい

  • このトピックには9件の返信、1人の参加者があり、最後にmotokichiにより3年前に更新されました。
9件の返信スレッドを表示中
  • 投稿者
    投稿
    • #49770
      石崎
      ゲスト

      エントリーカード全体をリンク化しています。
      エントリーカードにマウスポインタを持って行ったときに、
      カード全体に薄い色がかかるようにしたいのですが、どうしたらよいでしょうか?
      ホバー色を設定したグローバルナビのようにしたいのです。

      過去の質問を調べて一番近かったのが「エントリーカード全体をリンク化した時にタイトルの色を変えて
      アンダーラインを付ける」というものでした。

      #list .hover-card:hover .entry-card-content h2 {
          text-decoration: underline;
          color: #f00;
      }

      これではなくあくまでもエントリーカード全体に色を付けたいのですが、可能ですか?
      素晴らしいテーマをありがとうございます。どうかご教示ください。

    • #49771
      Hidekichi
      ゲスト

      .hover-cardはaタグなので、aのホバー色を継承しています。

      これ自体を上書きしても、それより前面にある要素に色がついていなければホバー時の色になりますがaタグは中身のサイズによって大きさが変わるので微調整が難しいかも知れないと言うことを含めて、

      .hover-card:hover {
        background-color: transparent;
      }
      
      #list .hover-card:hover .entry {
        background-color: rgba(255,0,0,.5);
      }

      などとすれば良いのではないでしょうか?

      選択した(マウスオーバーした)要素の中の全ての要素の前面に何かしらリンクの範囲を表示するのなら、
      サンプル: デフォルトのリストで全体リンク | codepen
      ※このサンプルはカスタマイザーの設定はいりません。デフォルトのリストでできます。
      ※cssはscssで書いてあるのでcss欄の下向き三角よりview compiledボタンでcssに変更したものを利用します。

      カスタマイザーで設定するものは、

      <a class="hover-card" href="#">
        <div class="entry"></div>
      </a>

      とhtmlが出力されるのに対して、サンプルでは、

      <div class="entry">
        <div class="hover"></div>
        //entryの中身
      </div>

      このように出力されます。.entryの幅・高さに100%で覆いかぶさり、最前面(とは指定してませんができます)に表示されるので他のリスト表示でもイケるんじゃなかろうかと。

      jqueryでは覆いかぶさるブロックの挿入とリンク操作だけしており、デザインはcssなので色々応用できます。

    • #49787
      石崎
      ゲスト

      Hidekichi様、大変ありがとうございます。

      1案の、

      .hover-card:hover {
      background-color: transparent;
      }

      #list .hover-card:hover .entry {
      background-color: rgba(255,0,0,.5);
      }

      でほぼ理想通りの結果が得られました。
      しかし1点だけ気になったのが「投稿日時」と「カテゴリ情報」を表示する設定にした場合、
      その1行だけ何も変化が無いということです。(タイトルと本文だけ色が付いて、中間のその一行だけ何も変化が無いので不自然になってしまいます。)
      今現在作っているブログでは表示しない予定ですので問題ないのですが、
      もし今後その部分も含めて色を変えたいという場合には示して頂いた2案の方にするしかないですか?

    • #49789
      Hidekichi
      ゲスト

      何もしなければ何も変化は起きません。つまり、.post-metaにはデフォルトで背景色がついていると言うだけのことです。それも含めて背景色の透過方法も前レスで書いてあります。
      そこらはデベロッパーツールでセレクタを調べて是非チャレンジしてみてください。理屈がわかりだせば自分でできることが増えてより自由にスタイルすることができるようになります。

      どれぐらいのスキルがある人がどういう環境で、どこまで自力でできるかは僕らはわかりません。

      カスタマイズがどうなっているかもわかりませんし、全部を書いた後でやっぱりここはこうなって欲しいということもあるとは思います。それは全て質問者のイメージの中であることで僕らはそこがどうなっているかを汲み取ることができないので質問に必要なことを書いておいて欲しいわけです。
      質問者が質問の全てを予想して書くこともまた不可能です。そのためそのページが現状どうなっているかを公開してもらうのはとても大切です。そこからわかることもありますから。

      初めての方は必ずお読みくださいにも書いてあると思いますが、問題が出ているページのアドレス等を提示してくださいとあるのはそういうことです。

    • #49793
      石崎
      ゲスト

      .post-metaの背景色を透過することで全て解決致しました。
      勉強不足ですいません、これから勉強していきます。ありがとうございました!!!

    • #60993
      motokichi
      ゲスト

      関連記事のサムネイル画像のホバー色をつけるためにはどうすれば良いのか教えて頂けないでしょうか?

    • #60995
      Akira
      ゲスト

      「エントリーカード全体をリンク化」が有効になっているかなどを知りたいので、サイト URL をご提示いただけないでしょうか。

    • #60997
      motokichi
      ゲスト

      「エントリーカード全体をリンク化」にはチェックできています。
      トップ記事ではちゃんと色が変わるようになりましたが、関連記事のエントリーカードのマウスホバー時に色をつけたいのですがわかりません。
      よろしくお願い致します。

      https://syuhu-hada.com

    • #60999
      Akira
      ゲスト

      サムネイル画像だけではなく、エントリーカード全体の色を変えるのであれば、このような CSS で可能です。

      .hover-card .related-entry-thumbnail:hover {
        background: #f0f8ff;
      }
    • #61001
      motokichi
      ゲスト

      解決しました。ありがとうございました。

9件の返信スレッドを表示中
  • トピック「エントリーカード全体にホバー色をつけたい」には新しい返信をつけることはできません。
スポンサーリンク
アドセンス(大)
アドセンス(大)