響應導航改變圖像懸停

即時創建一個響應網站，即時通訊嘗試讓我的導航改變懸停的標題背景圖像，基本上，當頁面打開時，圖像是一條直線，當你將鼠標懸停在鏈接會出現一個圖標就行了文字，希望它會是這個樣子：響應導航改變圖像懸停

（https://dl.dropboxusercontent.com/u/29163680/Screen%20shot%202013-10-17%20at%203.00.51%20PM.png）

我已經找到了幾個懸停技術，但沒有將響應工作，任何解決方案將大大不勝感激！謝謝！

這是我到目前爲止的代碼，這是不是很語義或響應

HTML

<body> 


<a href="" 
onMouseover="document.imagename.src=image2.src;" onMouseout="document.imagename.src=image1.src">PORTFOLIO</a> 

<a href="" 
onMouseover="document.imagename.src=image3.src" onMouseout="document.imagename.src=image1.src">ABOUT</a> 

<a href="" 
onMouseover="document.imagename.src=image4.src" onMouseout="document.imagename.src=image1.src">ABOUT</a> 

<a href="" 
onMouseover="document.imagename.src=image5.src" onMouseout="document.imagename.src=image1.src">ABOUT</a> 


<img src="images/head1.png" name="imagename" border="0"> 
</body>

JAVASCRIPT

<SCRIPT LANGUAGE="JAVASCRIPT"> 
if (document.images) { 
image1 = new Image 
image2 = new Image 
image3 = new Image 
image4 = new Image 
image5 = new Image 


image1.src = "https://dl.dropboxusercontent.com/u/29163680/head1.png" 
image2.src = "https://dl.dropboxusercontent.com/u/29163680/head2.png" 
image3.src = "https://dl.dropboxusercontent.com/u/29163680/head3.png" 
image4.src = "https://dl.dropboxusercontent.com/u/29163680/head4.png" 
image5.src = "https://dl.dropboxusercontent.com/u/29163680/head5.png" 

} 
</SCRIPT>

來源

2013-10-17 user2892088

請，開始向我們展示你嘗試過什麼至今。 – zero323

這應該給你一個想法：

<img id="header" src="http://example.com/default.jpg"> 
<ul> 
    <li class="nav-item" data-headerimg="http://example.com/home.jpg"><a href="home.html">Home</a></li> 
    <li class="nav-item" data-headerimg="http://example.com/street.jpg"><a href="street.html">Street</a></li> 
</ul> 

<script> 
    $('.nav-item').mouseenter(function() { 
     var img = $(this).attr('data-headerimg'); 
     $('img#header').attr('src', img); 
    }).mouseleave(function() { 
     $('img#header').attr('src', 'http://example.com/default.jpg'); 
    }); 
</script>

更新：

演示：http://codepen.io/anon/pen/gxHKi

來源

2013-10-17 22:29:42 Azamat

thnx Azamat！我的JavaScript是有限的，但我有點理解這裏發生了什麼，唯一的事情是當我測試它時，我看不到任何圖像，只有列表項目符號？ :) – user2892088

@ user2892088，我更新了代碼，我錯過了'img'標籤上的'src'。現在，您應該在加載頁面時加載默認圖片。我還更新了jQuery代碼以將圖像更改回默認值。看看你是否需要;） – Azamat

很棒，thnx。出於某種原因，我仍然無法看到圖像？我發佈了一個我之前嘗試過的版本，請告訴我您的想法？ :) – user2892088

響應導航改變圖像懸停

回答

相關問題