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条回答 默认 最新

  • 斯洛文尼亚旅游 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 如何让企业微信机器人实现消息汇总整合
  • ¥50 关于#ui#的问题：做yolov8的ui界面出现的问题
  • ¥15 如何用Python爬取各高校教师公开的教育和工作经历
  • ¥15 TLE9879QXA40 电机驱动
  • ¥20 对于工程问题的非线性数学模型进行线性化
  • ¥15 Mirare PLUS 进行密钥认证？（详解）
  • ¥15 物体双站RCS和其组成阵列后的双站RCS关系验证
  • ¥20 想用ollama做一个自己的AI数据库
  • ¥15 关于qualoth编辑及缝合服装领子的问题解决方案探寻
  • ¥15 请问怎么才能复现这样的图呀