Question

当悬停在其子项目上时，是否可以使图像菜单保持突出显示？我有5个导航菜单项，但只有一个下拉列表。每当我将鼠标悬停在About Us（我正在拍摄的那个）的子项目上时，About Us图像会转回原始图像。

有解决方法吗？我的朋友说这不可能，但我并不完全相信。

这是我的代码（仅供参考）

<html>
<head>

<title>CTI | About us</title>

<script type="text/javascript" rel="javascript" src="jquery-1.10.2.min.js"></script>

<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;
}
a { text-style:none; }
body {text-align: center; margin: 0; padding: 0;}
#wrapper { width:830px; margin:0 auto; }
</style>
</head>
<body>
<input id="data2" type="hidden" value="<?php if (isset($_POST['data2'])){echo $_POST['data2']; }else{} ?>">
<div  id="wrapper">
<table width="830px" border=0 cellspacing=0 cellpadding=0 >

<tr>
     <td valign="top" 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 href="aboutus1.php" class="menu" 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 target="content" href="partners.php">
    <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>
<tr>
<!--td colspan="2" class="bar"><img src="images/cti-upperbar.jpg" /></td-->
</tr>
</table>

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

已更新

我要感谢大家的所有努力。 :) 我做了你的建议，并按照小提琴格式，但菜单上没有图像显示:(仍然坚持。:(

CODE：

<html>
<head>

<title>CTI | About us</title>

<script type="text/javascript" rel="javascript" src="jquery-1.10.2.min.js"></script>
<link rel="stylesheet" type="text/css" href="styles.css" />
<script type="text/css">
.btn1{
    width: 85px;
    height: 58px;
    padding-top: 58px;
    float: left;
    text-align:left;
}

.btn1{
    background: url("images/home.jpg") no-repeat;
}
.btn1:hover{
    background: url("images/hover-home.jpg") no-repeat;
}

.btn2{
    width: 85px;
    height: 58px;
    padding-top: 58px;
    float: left;
    text-align:left;
}
.btn2{
    background: url("images/aboutus.jpg") no-repeat;
}
.btn2:hover{
    background: url("images/hover-aboutus.jpg") no-repeat;
}

.btn3{
    width: 85px;
    height: 58px;
    padding-top: 58px;
    float: left;
    text-align:left;
}
.btn3{
    background: url("images/partners.jpg") no-repeat;
}
.btn3:hover{
    background: url("images/hover-partners.jpg") no-repeat;
}

.btn4{
    width: 85px;
    height: 58px;
    padding-top: 58px;
    float: left;
    text-align:left;
}
.btn4{
    background: url("images/products.jpg") no-repeat;
}
.btn4:hover{
    background: url("images/hover-products.jpg") no-repeat;
}

.btn5{
    width: 85px;
    height: 58px;
    padding-top: 58px;
    float: left;
    text-align:left;
}
.btn5{
    background: url("images/contactus.jpg") no-repeat;
}
.btn5:hover {
    background: url("images/hover-contactus.jpg") no-repeat;
}
.menu ul li:hover .btn {
    background-position: -5px -120px;
}

.menu ul li{
    list-style:none;
}
.menu
{
    display: inline;
    float: left;
}
a {
    text-decoration:none;
    color:#fff;
    font-family:verdana;
    font-size:12px;
}
.menu ul li ul{
    display:none;
    background:#17c0fa;
    width:100px;
    color:#fff;
}

.menu ul li:hover ul{
    display:block;
    padding:15px;
    line-height:20px;

}
.menu ul li a:hover{
    color:#fff;
}
.menu ul li:hover .btn {
    background-position: -5px -120px;
}
</script>

<script type="text/javascript">
$(function(){
    $('li').hover(function(){

        $(this).find('ul').fadeIn();
    },function(){
        $(this).find('ul').fadeOut();
    });

});
</script>
</head>
<body>

<div  id="wrapper"-->
<table width="830px" border=0 cellspacing=0 cellpadding=0 >

<tr>
    <td valign="top" align="left"><a href="aboutus1.php"><div style="width:85px;height:58px;"></div></a></td>

    <td valign="bottom" align="right">
        <div class="menu">
            <ul>
                <li href="welcome.php" class="btn1"><img src="images/home.jpg" onmouseover="images/hover-home.jpg" onmouseout="images.home.jpg" /></li>
                <li class="btn2">
                    <ul>
                        <li><a href="aboutus1.php">About CTI</a></li>
                        <li><a href="aboutus2.php">Our Clients</a></li>
                        <li><a href="aboutus3.php">Mission / Vision</a></li>
                    </ul>
                </li>
                <li href="partners.php" class="btn3"></li>
                <li href="products.php" class="btn4"></li>
                <li href="contactus.php" class="btn5"></li>
            </ul>
        </div>
    </td>

<div class="clear"></div>
</tr>


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

我也删除了JS，因为css比我最近的js更容易。

Answer 1

离开你的小提琴（请坚持使用该方法，而不是JavaScript！）

删除按钮，然后将该类添加到li。当您将鼠标悬停在li上时，您可以移动到它的子元素中，但仍然位于li之上，但当您将鼠标悬停在<div>上并移入<ul>时不再在<div>。

之内

从子菜单中删除position:absolute和margin-top:90px。现在一切都应该有效。

<div class="menu">
  <ul>
    <li class="btn">HOVER
        <ul>
            <li><a href="#">Menu Item</a></li>
            <li><a href="#">Menu Item</a></li>
        </ul>
    </li>
  </ul>    
</div>

.menu ul li ul{
  display:none;
  background:#78a802;
  width:200px;
  color:#fff;
  padding-top:90px;
}

工作示例：http://jsfiddle.net/y2BtT/89/

Answer 2

也许您可以使用hover function在子菜单中执行某些操作你的意思是这样的：http://jsfiddle.net/yuhua/jJK2n/？

Answer 3

要解决您的问题，您唯一需要做的就是添加另一个CSS规则。将鼠标悬停在菜单项上以保留更改的图像。

.menu ul li:hover .btn {
    background-position: -5px -120px;
}

<强> EXAMPLE

你可以告诉你的朋友，他迷失因为在Web开发中一切皆有可能，你愿意花多少时间和精力去做：D

Answer 4

最简单的答案：

在你的CSS中只需替换......

.btn:hover{

<强>与

.menu li:hover .btn {

示例演示： http://jsfiddle.net/y2BtT/94/

灵感查看我制作的演示：http://jsfiddle.net/techsin/FtPvf/1/

将鼠标悬停在其子项上时突出显示“图像”菜单

4 个答案: