0
私は機能のリストを持っていて、アイコンとヘッダー（.top-wrapperクラスのコード）でdivの上にカーソルを置いてイメージを表示する必要があります。今私はいくつかのjqueryコードを持っていますが、それはホバー上のすべての要素で機能します、私はそれを各要素で別々に動作させる必要があります。jqueryでホバー上のdivに画像を表示するには？
HTML：
<ul class="row features-list justify-content-center justify-content-md-between justify-content-lg-center">
<li class="col-xl-3">
<img src="images/features-card-img.png" alt="Bottle">
<div class="d-flex flex-column bottle-text-wrapper arrow-up text-left mx-auto">
<h3 class="features-item-header bottle-header">Redesigning With Personality</h3>
<span class="bottle-small-text ml-auto">in <span class="yellow-text">web design</span></span>
</div>
</li>
<li class="col-10 col-sm-6 col-md-5 col-lg-4 col-xl-3 feature-item">
<div class="feature-top" id="feature-top-dev">
<div class="top-wrapper">
<i class="fa fa-desktop" aria-hidden="true"></i>
<h3 class="features-item-header">Web Development</h3>
</div>
<div class="hover-content">
<img src="images/features-card-img.png" alt="Bottle">
</div>
</div>
<div class="feature-bottom mx-auto">
<p class="features-text">Lorem ipsum dolor sit amet,
consectetur.</p>
</div>
</li>
<li class="col-10 col-sm-6 col-md-5 col-lg-4 col-xl-3 feature-item">
<div class="feature-top" id="feature-top-design">
<div class="top-wrapper">
<i class="fa fa-th" aria-hidden="true"></i>
<h3 class="features-item-header">Web Design</h3>
</div>
<div class="hover-content">
<img src="images/features-card-img.png" alt="Bottle">
</div>
</div>
<div class="feature-bottom mx-auto">
<p class="features-text">Lorem ipsum dolor sit amet,
consectetur.</p>
</div>
</li>
<li class="col-10 col-sm-6 col-md-5 col-lg-4 col-xl-3 feature-item">
<div class="feature-top" id="feature-top-graph-des">
<div class="top-wrapper">
<i class="fa fa-pencil" aria-hidden="true"></i>
<h3 class="features-item-header">Graphic Design</h3>
</div>
<div class="hover-content">
<img src="images/features-card-img.png" alt="Bottle">
</div>
</div>
<div class="feature-bottom mx-auto">
<p class="features-text">Lorem ipsum dolor sit amet,
consectetur.</p>
</div>
</li>
</ul>
</div>
jqueryの：それはどのように見えるか
$('#feature-top-dev').hover(
function() {
$('.top-wrapper').addClass('d-none');
$('.feature-top').css({'padding': '0', 'background-color': '#f5f5f5'});
$('.hover-content').fadeIn('slow');
},function() {
$('.top-wrapper').removeClass('d-none');
$('.feature-top').css({'padding': '20px 0', 'background-color': '#ffea00'});
$('.hover-content').fadeOut('slow');
}
);
スクリーンショット：それはイメージに変更する必要があり、黄色の背景を持つdiv要素の上にホバーで 
。
don'を離れるとき使用IDはクラス名を使用します。 IDは一意である必要があります。あなたがidを使うなら、最初の要素が –
の 'id'が要素ごとにユニークでなければならないので、' class'を使用してください。 –
私のコードは今動作しますが、 "Web Development" div's'を黄色の背景に置きます。しかし、私はそれを上に移動し、他の 'div'sと同じ黄色の背景と同じ場合、私は" Web開発 "の' div'でのみイメージを表示する必要があります。 – Belial