我正在创建一个响应式网站，我试图让我的导航在悬停时更改页眉背景图像，基本上，当页面打开时，图像是一条直线，当您将鼠标悬停在链接上时，在线上会出现一个图标在文本上，希望它看起来像这样:
!( 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>
最佳答案
这应该给你一个想法:
<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>
更新:
关于jquery - 在悬停时更改图像的响应式导航，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19438370/