jQuery的懸停在導航欄李

我有一個網站我用引導內置交換兩個圖像。我在導航欄中的每個鏈接的任一側放置圖像。該導航欄李一通過引導/我個人的CSS有一個懸停狀態，並且鏈接改變顏色，當你在任何地方移動鼠標在鏈接附近。我把一個img在鏈路的兩邊：jQuery的懸停在導航欄李

<li><a href="index.html"><img src="bonelefty.png"/>Home<img src="bonerighty.png"/></a>  
</li> 

<li><a href="about.html" id="about"><img src="bonelefty.png" class="img- 
swap"/>About<img src="bonerighty.png" class="img-swap"/></a></li> 

<li><a href="rates.html"><img src="bonelefty.png"/>Rates<img src="bonerighty.png"/></a> 
</li> 

<li><a href="contact.html"><img src="bonelefty.png"/>Contact<img src="bonerighty.png"/> 
</a></li>

我想添加一些jQuery的這個樣子，這是我在我的網站

jQuery(function(){ 
    $(".img-swap").hover(function(){ 
     this.src = this.src.replace("bonerighty.png","bonerightw.png"); 
    }, 
    function(){ 
     this.src = this.src.replace("bonerightw.png","bonerighty.png"); 
    }); 
});

的其他地方使用。當我加入IMG交換類圖像的旁邊，他們只有當你將鼠標懸停在該圖像變化的聯繫，只有一個圖像的變化（這對我來說很有意義）。我無法弄清楚當鼠標靠近鏈接和鏈接改變時如何改變圖像。

來源

2013-06-25 user2518391

你需要攻擊李把它拉：

jQuery(function(){ 
    $("li").hover(function(){ 
     jQuery("img:first", this).attr("src","bonerightw.png"); 
     jQuery("img:last", this).attr("src","bonerighty.png"); 
    }, 
    function(){ 
     jQuery("img:first", this).attr("src","bonerightw.png"); 
     jQuery("img:last", this).attr("src","bonerightw.png"); 
    }); 
});

您還可以使用CSS這樣做：

li{ 
    background-image: url("bonerighty.png"), url("bonerightw.png"); 
    background-position: left center, right center; 
} 

li:hover{ 
    background-image: url("bonerightw.png"), url("bonerighty.png"); 

}

來源

2013-06-25 02:43:56 Falci

OK這沒有targ等正確的圖像，並交換他們，但問題是現在右側圖像變得左側圖像boneleftw或bonelefty取決於它是否正被選中。也就是說，它正確地兩邊但隨後開始第一個鼠標boneright交換到boneleft後保持這種方式。那麼在進一步的鼠標移動過程中，骨骼都會變得僵硬，希望有所幫助。非常感謝。 – user2518391

我編輯我的答案是：增加了：第一，：最後 – Falci

現在左一個變成正確的。它已切換到錯誤的一邊在此之後，犯規做出反應，進一步懸停和停留在bonerightw很奇怪，感謝你的幫助，請讓我知道你在想什麼 – user2518391

您選擇的類名，則應該選擇a標籤或li標記。並用它來選擇你的圖像。其結果會是這樣的：

在HTML

<ul class="img-swap"> 
<li><a href="link"><img>link<img></a></li> 
</ul>

在你的js

$('.img-swap li').hover(function(){ 
//select the images 
});

或

$('.img-swap li a').hover(function(){ 
//select the images 
});

這裏是一個非常粗略的例子 - http://codepen.io/lukeocom/pen/cotAJ

來源

2013-06-25 02:46:41 lukeocom

試了一下，當我試圖實施的每一面上不同的圖像鏈接就停止了運轉完全地（對圖像沒有懸停效果）不知道我做錯了什麼。 – user2518391

如果你正在改變是對圖像的路徑，那麼它應該繼續工作。我更新了不同的圖像...... – lukeocom

任何運氣解決你的問題的代碼？ – lukeocom

jQuery的懸停在導航欄李

回答

相關問題