0

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

！（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>
4

1 回答 1

0

这应该给你一个想法： 

<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-17T22:29:42.763 回答