Der Versuch, zwischen 3 Bildern im Schwebeflug zu wechseln

Question

Ich habe 3 verschiedene Info-Check-Klassen mit jeweils einem anderen Bereich, der ein anderes Bild zeigen sollte. Wenn ich den Info-Haken schwebe, sollte das Bild anstelle des Originalbildes "Autoselect-Bild" angezeigt werden. Beim Mouseout sollte das Bild wieder auf das ursprüngliche "Autoselect-Bild" wechseln. Ich habe versucht, jQuery dafür zu verwenden, aber ich konnte nicht den richtigen Weg finden, dies zu tun. Das ist mein HTML und CSS:

div.info-check { 
 
    position: absolute; 
 
    right: 50px; 
 
    top: 2px; 
 
    background-size: 100%; 
 
    width: 15px; 
 
    height: 15px; } 
 

 
span.breedte-tooltip, span.hoogte-tooltip, span.inch-tooltip { 
 
    background-size: 100%; 
 
    background-repeat: no-repeat; 
 
    visibility: hidden; 
 
    width: 230px; 
 
    height: 70px; 
 
    z-index: 20; 
 
    opacity: 0; 
 
    transition: all 0.4s ease; } 
 

 
span.breedte-tooltip { background-image: url('/images/icons/breedte-bepalen.png');} 
 
span.hoogte-tooltip { background-image: url('/images/icons/hoogte-bepalen.png'); } 
 
span.inch-tooltip { background-image: url('/images/icons/inchmaat-bepalen.png'); }

<div class="autoselect"> 
 
    <img class="autoselect-pic" src="/images/products/inchmaat-bepalen.png" alt="inchmaat-bepalen"> 
 
    <div class="autorow"> 
 
    <div class="breedte"> 
 
     <label for="Breedte">Breedte</label> 
 
     <div class="info-check"><span class="breedte-tooltip"></span></div> 
 
     <select name="Breedte" id="filter-width"> 
 
     <option>Selecteer</option> 
 
     </select> 
 
    </div> 
 
    <div class="lengte"> 
 
     <label for="Hoogte">Hoogte</label> 
 
     <div class="info-check"><span class="hoogte-tooltip"></span></div> 
 
     <select name="lengte" id="filter-height"> 
 
     <option>Selecteer</option> 
 
     </select> 
 
    </div> 
 
    <div class="inch"> 
 
     <label for="Inch">Inchmaat</label> 
 
     <div class="info-check"><span class="inch-tooltip"></span></div> 
 
     <select name="inch" id="filter-inch"> 
 
     <option>Selecteer</option> 
 
     </select> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

Sie jQuerys Hover-Funktion auf dem Element verwenden können, die Sie benötigen. Dies ist die Art und Weise:

$(selector).hover(handlerIn, handlerOut) 

Im Selektor Sie Info-Check setzen, und dann in den Handler Sie fragen sie die Bilder nach Bedarf zu ändern. Vielleicht mit Attribut, um die Quelle zu ändern oder die Klasse des Elements zu ändern (was ich denke, ist besser). Für weitere Informationen über hover.