0

抱歉英语不好。我是新来这里的。所以，我的问题是，我编写了一个鼠标悬停图像更改导航栏，它在我的电脑上工作正常，但是当我发布它时它不起作用:(，实际上我是初级网页设计一个开发领域。所以如果有人知道我的代码有什么问题，请告诉我。谢谢...

发布的网站..

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.||&copy; 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;   


}
4

1 回答 1

0

看起来您的 jQuery 引用的文件与服务器上的文件不同。

例如，您的 jQuery 读取：

$(this).attr("src","images/abouthover.jpg");

但是，网站上的文件被列为 images/abouthover.JPG

如果您将 jQuery 更改为：

$(this).attr("src","images/abouthover.JPG");

或者将文件的文件名更改为 images/abouthover.jpg

您的代码应该可以工作。

我猜为什么它可以在您的计算机上运行，​​但不能在您的托管站点上运行，因为您的个人计算机是不区分大小写的 Windows 机器，而您的托管服务器是特定大小写的 Unix 机器。

我希望这能解决你的问题。

于 2013-10-05T15:52:06.567 回答