抱歉英文不好。我是新来的。所以，我的问题是，我编码鼠标悬停图像更改导航栏，它在我的电脑上工作正常，但当我发布它不工作:(，实际上我是网络设计开发领域的大三学生。如果有人知道我的代码有什么问题，请告诉我。谢谢......
发布网站..
http://matarakatharagamarailway.freeiz.com/
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Matara - Katharagama New Railway Project</title>
<link href="css/style.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="engine1//style.css" media="screen" />
<script type="text/javascript" src="jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="navscript.js"></script>
</head>
<body>
<div id="container">
<div id="header">
<div id="logo_t">
<img src="images/title.png"/>
</div><!--end logo-->
<div id="symbol">
<img src="images/symbol.jpg"/>
</div><!--end symbol-->
<div id="flag">
<img src="images/flag.gif"/>
</div><!--end flag-->
<div id="shadow">
<img src="images/shadow.PNG" width="900" height="100" />
</div><!--end shadow-->
<ul id="nav">
<ul>
<li id="home"><a href="http://www.google.lk" target="_blank"><img src="images/home.jpg" alt="homebutton" class="homebt"/></a></li>
<li id="about"><a href="http://www.google.lk" target="_blank"><img src="images/about.jpg" alt="aboutbutton" class="aboutbt"/></a></li>
<li id="contractor"><a href="http://www.google.lkm" target="_blank"><img src="images/contracter.jpg" alt="contractorbutton" class="contractorbt"/></a></li>
<li id="gallery"><a href="http://www.google.lk" target="_blank"><img src="images/gallery.jpg" alt="gallerybutton" class="gallerybt"/></a></li>
<li id="contact"><a href="http://www.google.lk" target="_blank"><img src="images/contactus.jpg" alt="contactbutton" class="contactbt"/></a></li>
</ul>
</ul><!--end ul-->
</div><!--end header-->
<!-- Start WOWSlider.com BODY section id=wowslider-container1 -->
<div id="wowslider-container1">
<div class="ws_images"><ul>
<li><img src="data1/images/image_1.jpg" alt="" title="" id="wows1_0"/></li>
<li><img src="data1/images/image_2.jpg" alt="" title="" id="wows1_1"/></li>
<li><img src="data1/images/image_3.jpg" alt="" title="" id="wows1_2"/></li>
<li><img src="data1/images/image_4.jpg" alt="" title="" id="wows1_3"/></li>
<li><img src="data1/images/image_5.jpg" alt="" title="" id="wows1_4"/></li>
</ul></div>
<div class="ws_bullets"><div>
<a href="#" title=""><img src="data1/tooltips/image_1.jpg" alt=""/>1</a>
<a href="#" title=""><img src="data1/tooltips/image_2.jpg" alt=""/>2</a>
<a href="#" title=""><img src="data1/tooltips/image_3.jpg" alt=""/>3</a>
<a href="#" title=""><img src="data1/tooltips/image_4.jpg" alt=""/>4</a>
<a href="#" title=""><img src="data1/tooltips/image_5.jpg" alt=""/>5</a>
</div></div>
<div id="wowslider-frame"></div>
<div id="wowslider-shadow"></div>
<a href="#" class="ws_frame"></a>
<div class="ws_shadow"></div>
</div>
<script type="text/javascript" src="engine1//wowslider.js"></script>
<script type="text/javascript" src="engine1//script.js"></script>
<!-- End WOWSlider.com BODY section -->
<div id="breaker">
<img src="images/breaker.png" width="900"/>
</div><!--end breaker-->
<div id="main">
<div id="content">
<h1>Welcome.....</h1>
<br/>
<h3>Welcome To The Matara - Katharagama New Railway Project.</h3>
</div><!--end content-->
<div id="col1">
<h2>His Excellency The President<br> of Democratic Socialist<br> Republic of Sri Lanka</h2>
<img src="images/president.jpg"/>
</div><!--end col1-->
<div id="col2">
<h4>Ho. Minister of Transport</h4>
<img src="images/welgama2.jpg"/>
</div><!--end col2-->
</div><!--end main-->
</div><!--end slideshow-->
</div><!--end container-->
<div id="footer">
Design And Developed By ||Revolution Media Group Inc.||© In Association With Rahani Media Corp,Inc.
</div><!--end footer-->
</body>
</html>
我的jquery代码！
// JavaScript Document
$(document).ready(function(){
$(".homebt").hover(function() {
$(this).attr("src","images/homehover.jpg");
}, function() {
$(this).attr("src","images/home.jpg");
});
$(document).ready(function(){
$(".contractorbt").hover(function() {
$(this).attr("src","images/contracterhover.jpg");
}, function() {
$(this).attr("src","images/contracter.jpg");
});
$(document).ready(function(){
$(".contactbt").hover(function() {
$(this).attr("src","images/contactushover.jpg");
}, function() {
$(this).attr("src","images/contactus.jpg");
});
$(document).ready(function(){
$(".gallerybt").hover(function() {
$(this).attr("src","images/galleryhover.jpg");
}, function() {
$(this).attr("src","images/gallery.jpg");
});
$(document).ready(function(){
$(".aboutbt").hover(function() {
$(this).attr("src","images/abouthover.jpg");
}, function() {
$(this).attr("src","images/about.jpg");
});
});
});
});
});
});
css代码！
@charset "utf-8";
/* CSS Document */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
a
{
text-decoration:none;
color:black;
}
a,hover
{
text-decoration:none;
}
#container
{
background-color: #FFF;
width:920px;
height:1500px;
margin-top:10px;
margin-bottom:40px;
margin-left:45px;
border:1px solid #DDD;
}
body
{
background-color: #E5E5E5;
}
#logo_t
{
position:absolute;
font-size:24px;
margin-top:20px;
margin-left:190px;
color:#F00;
}
#symbol img
{
height:80px;
float:left;
margin-left:20px;
margin-top:20px;
}
#flag img
{
height:80px;
float:right;
margin-top:20px;
margin-right:10px;
}
#nav ul,li
{
float:left;
display:inline;
list-style-type:none;
height:40px;
}
#nav ul
{
float:left;
margin-top:130px;
margin:0px;
padding:0px;
height:40px;
}
#nav li:before
content:url(../images/divider.png) ;
position:absolute;
}
#nav li:first-child:before
content:none;
}
#nav span
{
}
#nav
{
background-color:#E5E5E5;
height:20px;
width:900px;
padding-top:10px;
padding-bottom:10px;
margin-top:120px;
position: absolute;
margin-left:10px;
margin-right:10px;
}
#slideshow
{
width:880px;
height:360px;
margin-top:172px;
position: relative;
margin-left:10px;
margin-right:10px;
}
#slideshow > div {
top: 10px;
left: 10px;
right: 5px;
bottom: 10px;
position:absolute;
}
#content
{
margin-top:10px;
margin-left:10px;
margin-right:320px;
background-color: #F5F5F5;
height:830px;
position:relative;
border:1px solid #FAFDFE;
}
h1
{
font: Verdana, Geneva, sans-serif;
font-size:30px;
margin-left:10px;
font-style:italic;
margin-top:20px;
position: absolute;
}
h3
{
position:absolute;
margin-top:50px;
margin-left:10px;
}
#breaker
{
margin-top:20px;
margin-left:10px;
}
#shadow
{
margin-top:103px;
position: absolute;
margin-left:10px;
margin-right:10px;
}
#shadow img
{
}
#col1
{
background-color: #F5F5F5;
color: #6E6E6E;
font-size:23px;
line-height:120%;
width:300px;
height:290px;
float:right;
position: relative;
margin-top:-830px;
margin-right:10px;
position:relative;
border:1px solid #FAFDFE;
}
#col1 img
{
width:280px;
margin-left:12px;
margin-top:20px;
}
#col1 h2
{
margin-left:10px;
margin-top:10px;
}
#col2
{
background-color: #F5F5F5;
color: #6E6E6E;
font-size:23px;
line-height:150%;
width:300px;
height:340px;
float:right;
position: realative;
margin-top:-530px;
margin-right:10px;
margin-left:617px;
border:1px solid #FAFDFE;
}
#col2 img
{
width:280px;
height:230px;
margin-left:12px;
margin-top:20px;
}
#col2 h4
{
margin-left:10px;
margin-top:10px;
}
#footer
{
margin-left:200px;
margin-bottom:20px;
font:Tahoma, Geneva, sans-serif;
font-family:Tahoma, Geneva, sans-serif;
font-size:12px;
}
#home img
{
width:100px;
height:40px;
margin-top:-10px;
margin-bottom:px;
position: relative;
}
#about img
{
width:100px;
height:40px;
margin-top:-10px;
margin-bottom:px;
position: relative;
border-left:1px solid #BEBEBE;
}
#contractor
{
width:130px;
height:40px;
margin-top:-10px;
margin-bottom:px;
position: relative;
border-left:1px solid #BEBEBE;
}
#gallery
{
width:100px;
height:40px;
margin-top:-10px;
margin-bottom:px;
position: relative;
border-left:1px solid #BEBEBE;
}
#contact
{
width:100px;
height:40px;
margin-top:-10px;
margin-bottom:px;
position: relative;
border-left:1px solid #BEBEBE;
}
#shadow180
{
margin-top:17px;
margin-left:50px;
margin-right:100px;
position:absolute;
}
#shadow1
{
margin-top:55px;
position: absolute;
margin-left:60px;
}
答案 0 :(得分：0)
看起来你的jQuery引用的文件与服务器上的文件不同。
例如，您的jQuery读取：
$(this).attr("src","images/abouthover.jpg");
但是，网站上的文件列为images / abouthover.JPG
如果您将jQuery更改为：
$(this).attr("src","images/abouthover.JPG");
或者将文件的文件名更改为images / abouthover.jpg
您的代码应该有效。
我猜测它为什么在您的计算机上运行而不在您的托管网站上运行的是您的个人计算机是一台Windows机器，它不是特定于案例的，而您的托管服务器是一台特定于案例的Unix机器。
我希望这可以解决你的问题。