VWSとは フォーラム Lightning [ 解決済 ] 固定ページの画像にimg:hoverを付けたい

[ 解決済 ] 固定ページの画像にimg:hoverを付けたい

  • このトピックには6件の返信、3人の参加者があり、最後にnobuにより3ヶ月、 1週前に更新されました。
7件の投稿を表示中 - 1 - 7件目 (全7件中)
  • 投稿者
    投稿
  • #39046

    nobu
    参加者

    画像HTML
    <figure class=”wp-block-image size-large”></figure>

    カスタムcssに書き込んでも表示がうまくいかないのですがどうしたら表示ができますか??
    よろしくお願いいたします。
    wp-block-image size-large img:hover {
    opacity: 0.5;
    }

    aligncenter wp-image-1092 img:hover {
    opacity: 0.5;
    }

    #39081

    DRILL LANCER
    モデレーター

    .wp-block-image は画像ブロックの一番外側の div タグに
    .aligncenter と .size-large はそのすぐ下の figure タグに
    .wp-image-787 はそのすぐ下の img タグの中にあります。

    なので、書き方の例としては下記の方式で書けば OK です。

    .wp-block-image img:hover {
    	opacity: 0.5;
    }
    .wp-block-image .size-large img:hover {
    	opacity: 0.5;
    }
    .wp-block-image .aligncenter.size-large .wp-image-787:hover{
    	opacity: 0.5;
    }
    • この返信は3ヶ月、 1週前にDRILL LANCERが編集しました。
    #39086

    nobu
    参加者

    返信ありがとうございます!!

    .wp-block-image .size-large img:hover {
    opacity: 0.5;
    }

    これで一応できたのですが、全部のimgにhoverがついてしまってリンクをつけたimgのみに指定したい場合はどうしたらいいのでしょうか??

    画像HTML
    <figure class=”wp-block-image size-large”></figure>

    <figure class=”wp-block-image size-large”></figure>

    .wp-image-1093 aligncenter img:hover {
    opacity: 0.5;
    }

    これにすると反映されませんでした。

    #39088

    DRILL LANCER
    モデレーター

    この場合の正しい書き方は下記のとおりです。

    .wp-block-image .aligncenter .wp-image-1093:hover{
    	opacity: 0.5;
    }

    詳しくは下記を参考にトライしてみてください。

    全てのWordPressテーマで使える!デザインをピンポイントで変更する方法 〜親テーマのCSSは書き換えないで〜

    #39103

    nobu
    参加者

    何度も申し訳ありません。
    下記のコード試したのですが、これに書き換えるとhoverされなくなります。

    .wp-block-image .aligncenter .wp-image-1093 :hover{
    opacity: 0.5;
    }

    他のコードに変えてみても同じく反応なしです。
    唯一正しく反応するのは

    .wp-block-image :hover{
    opacity: 0.5;
    }

    このコードだけなんですが、何か設定を変えないととかですかね。。。
    お助けお願いいたします。

    #39104

    Vektor,Inc
    キーマスター

    こちらの記事は読みましたか?

    全てのWordPressテーマで使える!デザインをピンポイントで変更する方法 〜親テーマのCSSは書き換えないで〜

    質問の内容からして該当のページなどを直接見ないと説明し辛いのですが、
    上記ページなどを見てCSSのセレクタの書き方や現状cssがどう効いているのかを見れるようになると他でも全て応用が効くので一度確認してみてください。

    #39153

    nobu
    参加者

    追加で共通clssを作って以前回答したいただいたコードを足して解決しました!!
    ありがとうございました!!

7件の投稿を表示中 - 1 - 7件目 (全7件中)
  • このトピックに返信するにはログインが必要です。