Wie Bild in Div bei Hover mit Jquery zeigen?

Ich habe eine Liste von Funktionen und ich muss Bild auf Hover über die div mit Symbol und Header (.top-wrapper Klasse im Code) zeigen. Jetzt habe ich etwas jquery Code, aber es funktioniert auf alle Elemente in Hover, ich brauche es separat auf jedem der Elemente zu arbeiten.Wie Bild in Div bei Hover mit Jquery zeigen?

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'); 
     } 
    );

Screenshots, wie es aussieht:

Auf schweben über den div mit gelbem Hintergrund, es zu Bild geändert werden muß.

Quelle

2017-12-30 Belial

Don' t benutze den ID-Klassennamen. Die ID muss eindeutig sein. Wenn Sie die ID verwenden, erhalten Sie nur das erste Element –

'id'nicht, das pro Element eindeutig ist, also verwenden Sie' class' –

mein Code funktioniert jetzt, aber wenn ich auf "Web Development" schwebe, erscheint 'div' Bild auf allen' div's' mit gelbem Hintergrund. Aber ich muss das Bild nur auf "Web Development" "div" zeigen, wenn ich darüber schwebe und dasselbe mit anderen "div's" mit gelbem Hintergrund. – Belial

sollten Sie Ihre img setzen mit CSS-Attribute wie

img.hover { 
    position: absolute; 
    top: 0px; 
    left: 0px; 
    display: none; 
    width: 100%; 
}

so, wenn Sie Ihr Element schweben, Sie fadeToggle() Ihr Bild und fadeToggle() es zurück, wenn die Maus verlässt vielleicht

Quelle

2017-12-30 20:41:12

Wie Bild in Div bei Hover mit Jquery zeigen?

Antwort

Verwandte Themen