ホバリングで3つの画像を入れ替えようとしています

Question

私は3種類のインフォメーションチェッククラスを用意しています。私がinfo-checkをホバーすると、元のイメージ "autoselect-pic"の代わりにイメージが表示されるはずです。そして、マウスアウトすると、イメージは元の "自動選択ピクチャ"に戻されます。私はこのためにjqueryを使ってみましたが、これを行う正しい方法を見つけることができませんでした。

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

あなたはあなたが必要とする要素にjQueryのホバー機能を使用することができます。これは私のHTMLとCSSです。これは方法です：

セレクタでinfo-checkを入力し、ハンドラの中に必要に応じて画像を変更するよう依頼します。たぶん、属性を使ってソースを変更したり、要素のクラスを変更することができます（これは良いと思います）。

hoverの詳細については、こちらをご覧ください。