javascript - 导航中的菜单突出显示

Question

我似乎找不到我的程序出了什么问题。当您将鼠标悬停在图像菜单上时，onmouseout 不起作用..

Click here

代码如下:

<script type="text/javascript" rel="javascript" src="jquery-1.10.2.min.js"></script>
<link rel="stylesheet" type="text/css" href="styles.css" />
<script>
function over(me){
me2=me;
if(me=='about'){
$('#id_About').attr('src','images/hover-aboutus.jpg');}else{$('#id_About').attr('src','images/aboutus.jpg');}

 if(me=='partners') {
$('#id_Partners').attr('src','images/hover-partners.jpg');}else{$('#id_Partners').attr('src','images/partners.jpg');
}

if(me=='products'){
$('#id_Products').attr('src','images/hover-products.jpg');}else{$('#id_Products').attr('src','images/products.jpg');}

if(me=='contactus'){
$('#id_Contactus').attr('src','images/hover-contactus.jpg');}else{$('#id_Contactus').attr('src','images/contactus.jpg');}
}
$( document ).ready(function() {
 me2='about'; 
$('#id_About').attr('src','images/hover-aboutus.jpg');
});

</script>  


<style type="text/css">
img {
border: 0;
}

body {text-align: center; margin: 0; padding: 0;}

#wrapper {width: 830px; margin: 0 auto; position: relative;}

</style>
</head>
<input id="data2" type="hidden" value="<?php if (isset($_POST["data2"])){echo $_POST["data2"]; }else{}?>">
<div  id="wrapper">
<table width=802 border=0 cellspacing=0 cellpadding=0>

<tr>
     <td valign="bottom" align="left"><a href="aboutus1.php"><img src="images/cti-logo.png"></a></td>

     <td valign="bottom" align="right">
<a href="welcome.php">
    <img  src="images/home.jpg" onmouseover="this.src='images/hover-home.jpg'" onmouseout="this.src='images/home.jpg'"/>
</a>
    <a href="aboutus1.php" target="content">
        <img id="id_About" onclick="over('about')"  src="images/aboutus.jpg"  onmouseover="this.src='images/hover-aboutus.jpg'" onmouseout="if(me2=='about'){}else{this.src='images/aboutus.jpg'}" />
    </a>
<a class="partners" href="partners.php" target="content">
    <img onclick="over('partners')" id="id_Partners" src="images/partners.jpg" onmouseover="this.src='images/hover-partners.jpg'" onmouseout=" if(me2=='partners'){}else{this.src='images/partners.jpg'}" />
</a>
<a href="products1_1.php" target="content">
    <img onclick="over('products')" id="id_Products" src="images/products.jpg"  onmouseover="this.src='images/hover-products.jpg'" onmouseout=" if(me2=='products'){}else{this.src='images/products.jpg'}" />
</a>
<a href="contactus.php" target="content">
    <img id="id_Contactus" onclick="over('contactus')" src="images/contactus.jpg"  onmouseover="this.src='images/hover-contactus.jpg'" onmouseout=" if(me2=='contactus'){}else{this.src='images/contactus.jpg'}" class="contactus" />
</a>
</td>
</tr>

</table>
 <img src="images/cti-upperbar.jpg" />
</div>

所有菜单都被高亮了:(我现在真的很沮丧。

Answer 1

不要用 Javascript 来做。 CSS 可以更容易地解决这个问题。只需向代码的每个 a href 添加一个类，然后在您的 CSS 文件中执行类似这样的操作。

.your-class{
    background: url(your-file.jpg) no-repeat;}

.your-class a:hover{
    background: url(your-file-hover.jpg) no-repeat;}

或

.parent-class a{
    background: url(your-file.jpg) no-repeat;}

.parent-class a:hover{
    background: url(your-file-hover.jpg) no-repeat;}