Question

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

以下是代码：

<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;}

OR

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

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

Answer 2

第二个菜单项的图像名称错误。检查第56行的标签img，src等于“images / paratners.jpg”，应该是“images / partners.jpg”

导航菜单突出显示

2 个答案: