Question

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

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

Answer 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

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

1 个答案: