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

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

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

  • 投稿者
    投稿
  • #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

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

トピック「エントリーカード全体にホバー色をつけたい」への新規返信追加は締め切られています。

スポンサーリンク
アドセンス(大)
アドセンス(大)