私はワードプレスのテーマを開発しています。jQueryまたはCSSのみを使用して、ホバー時に他の投稿に影響を与えずにその投稿の要素のみをターゲットにするにはどうすればよいですか? より具体的には、ホバー時に画像の上にいくつかのボタンを表示したいのですが、明らかに他の投稿の画像には表示したくありません。
これはここでの単一の投稿であり、ループ内のコードです。ボタンは .actions div 内にあります。
<div class="post-holder">
<div class="post-image">
<div class="post-image-sizer">
<?php
$args = array( 'post_type' => 'attachment','numberposts' => 1,'post_parent' => $post->ID );
$images = get_posts($args);
echo wp_get_attachment_image($images[0]->ID, $size='attached-image');
?>
<div class="actions">
<div class="btn download"></div>
<div class="btn expand"></div>
</div>
</div>
</div>
<div class="post-info">
<div class="post-date">
<?php the_time('F j, Y'); ?>
</div>
</div>
</div>
CSS は最初にボタンを非表示にします。
.btn {
display: none;
}
では、jQuery または純粋な CSS で、ホバーされた 1 つの投稿の「.btn」のみをターゲットにするにはどうすればよいですか? 500 ミリ秒のアニメーションがあるので、必要に応じて入れてください。CSS はもちろん素晴らしいですが、方法がわからないか、可能であれば、このターゲティングを使用します。ホバー トリガー要素は .post-image div であるため、ボタン自体の上にホバーしたときにホバーが失われることはありません。