u010003962 2017-04-26 10:33 采纳率: 100%
浏览 1456
已采纳

鼠标悬停 二级菜单不显示，Jquery哪里不对啊？

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>二级菜单</title>
<script type="text/javascript" src="jquery-3.2.0.js"></script>
<style type="text/css">
a{
    color:#FFF;
    text-decoration:none;
}
.first,.second
{
    list-style:none;
}
.first>li
{
    float:left;
}
.second
{
    padding:0px;
}
.first>li>a
{
    background:grey;
    color:#FFF;
    margin-left:1px;
    width:100px;
    padding-top:10px;
    padding-bottom:10px;
    text-align:center;
    display:block;
}

.second>li>a
{
    width:100px;
    background:blue;
    padding-top:10px;
    padding-bottom:10px;
    padding-left:0px;
    margin-top:1px;
    margin-left:0px;
    text-align:center;
    display:none;
}

</style>
</head>

<body>
    <ul class="first">
    <li>
        <a href="javascript:void(0)">固话业务</a>
        <ul class="second">
            <li><a href="javascript:void(0)">400电话</a></li>
            <li><a href="javascript:void(0)">401电话</a></li>
            <li><a href="javascript:void(0)">402电话</a></li>
        </ul>
    </li>
    <li>
        <a href="javascript:void(0)">宽带业务</a>
        <ul class="second">
            <li><a href="javascript:void(0)">8兆宽带</a></li>
            <li><a href="javascript:void(0)">16兆宽带</a></li>
            <li><a href="javascript:void(0)">24兆宽带</a></li>
        </ul>
    </li>
    <li>
        <a href="javascript:void(0)">帮助与支持</a>
    </li>
</ul>

<script type="text/javascript">
        $('ul.first>li>a').hover(function(){
            $(this).css('background','red');
            $(this).next().children().has('a').css('color','black').show();
        },function(){
            $(this).css('background','grey');
            $(this).next().children().has('a').css('display','none');
        });
</script>

</body>
</html>
  • 写回答

2条回答 默认 最新

  • Go 旅城通票 2017-04-26 12:09
    关注

    jquery路径对了没有？而且2+的jquery不支持ie8-，注意浏览器兼容性
    has改为find

    
        $('ul.first>li>a').hover(function () {
            $(this).css('background', 'red');
            $(this).next().children().find('a').css('color', 'black').show();
        }, function () {
            $(this).css('background', 'grey');
            $(this).next().children().find('a').css('display', 'none');
        });
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题？

悬赏问题

  • ¥15 Arduino红外遥控代码有问题
  • ¥15 数值计算离散正交多项式
  • ¥30 数值计算均差系数编程
  • ¥15 redis-full-check比较 两个集群的数据出错
  • ¥15 Matlab编程问题
  • ¥15 训练的多模态特征融合模型准确度很低怎么办
  • ¥15 kylin启动报错log4j类冲突
  • ¥15 超声波模块测距控制点灯，灯的闪烁很不稳定，经过调试发现测的距离偏大
  • ¥15 import arcpy出现importing _arcgisscripting 找不到相关程序
  • ¥15 onvif+openssl，vs2022编译openssl64