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

[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;
}

[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;
}

• この返信は4年、 7ヶ月前にDRILL LANCERが編集しました。

[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;
}

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

[DRILL LANCER]

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

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

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

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

[nobu]

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

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

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

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

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

[Vektor,Inc]

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

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

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

[nobu]

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

[投稿者]

投稿