响应式导航，在悬停时更改图像答案

【问题标题】：Responsive Nav that changes image on hover响应式导航，在悬停时更改图像
【发布时间】：2025-12-04 13:55:01
【问题描述】：

我正在创建一个响应式网站，我试图让我的导航在悬停时更改标题背景图像，基本上，当页面打开时，图像是一条直线，当你将鼠标悬停在链接上时，一个图标出现在线上在文本上，希望它看起来像这样：

!(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>

【问题讨论】：

请先向我们展示您迄今为止尝试过的内容。

标签： jquery html css hover sprite

【解决方案1】：

这应该会给你一个想法：

<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

【讨论】：

谢谢阿扎马特！我的 javascript 是有限的，但我有点理解这里发生了什么，唯一的事情是当我测试它时我看不到任何图像，只有列表要点？ :)
@user2892088 ，我已经更新了代码，我错过了 img 标签上的 src。现在您应该在页面加载时加载默认图像。我还更新了 jQuery 代码以将图像更改回默认值。看看是不是你需要的;)
太棒了，谢谢。由于某种原因，我仍然看不到图像？我在上面也发布了我之前尝试过的版本，让我知道你的想法吗？ :)
太棒了！ thnx azamat，你最好的！ =^J