[ 解決済 ] 固定ページの画像にimg:hoverを付けたい
[ 解決済 ] 固定ページの画像にimg:hoverを付けたい
- このトピックには6件の返信、3人の参加者があり、最後に
により4年、 5ヶ月前に更新されました。
-
投稿
-
画像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;
}.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; }返信ありがとうございます！！
.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;
}これにすると反映されませんでした。
この場合の正しい書き方は下記のとおりです。
.wp-block-image .aligncenter .wp-image-1093:hover{ opacity: 0.5; }詳しくは下記を参考にトライしてみてください。
何度も申し訳ありません。
下記のコード試したのですが、これに書き換えるとhoverされなくなります。.wp-block-image .aligncenter .wp-image-1093 :hover{
opacity: 0.5;
}他のコードに変えてみても同じく反応なしです。
唯一正しく反応するのは.wp-block-image :hover{
opacity: 0.5;
}このコードだけなんですが、何か設定を変えないととかですかね。。。
お助けお願いいたします。こちらの記事は読みましたか？
質問の内容からして該当のページなどを直接見ないと説明し辛いのですが、
上記ページなどを見てCSSのセレクタの書き方や現状cssがどう効いているのかを見れるようになると他でも全て応用が効くので一度確認してみてください。
- このトピックに返信するにはログインが必要です。
