試圖在懸停的3個圖像之間交換

我有3個不同的信息檢查類，每個不同的跨度應顯示不同的圖像。當我懸停信息檢查時，應該顯示圖像而不是原始圖像「autoselect-pic」。當鼠標移出時，圖像應該變回原來的「autoselect-pic」。我嘗試過使用jquery，但我無法找到正確的方法來做到這一點。這是我的HTML和CSS：試圖在懸停的3個圖像之間交換

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>

來源

2016-11-14 Larsmanson

你嘗試過使用：hover選擇器嗎？ –

使用懸停選擇器，您不能在HTML中的其他位置處操作現有圖像以改變爲另一圖像據我所知 – Larsmanson

@Larsmanson當您將鼠標懸停在要影響的元素的父級上時，例如'.info-檢查：懸停span.breedte-tooltip' –

您可以使用jQuery的懸停功能，你需要的元素。這是方式：

$(selector).hover(handlerIn, handlerOut)

在選擇器中，你把信息檢查，然後在你要求它改變圖像的處理程序。也許使用屬性來更改源或更改元素的類（我認爲這更好）。

欲瞭解更多有關hover的信息。

來源

2016-11-14 11:37:14

試圖在懸停的3個圖像之間交換

回答

相關問題