响应导航改变图像悬停

即时创建一个响应网站，即时通讯尝试让我的导航改变悬停的标题背景图像，基本上，当页面打开时，图像是一条直线，当你将鼠标悬停在链接会出现一个图标就行了文字，希望它会是这个样子：响应导航改变图像悬停

（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

响应导航改变图像悬停

回答

相关问题