鼠标移上去显示一个下拉,移开下拉隐藏

第一种
$("#op1").hover(function(e) {
        $("#op2").show(); 
    },function(){ 
        $("#op2").hide(); 
    });
    $("#op2").hover(function(){//对按钮的处理 
        $(this).parent().children("#op2").show(); 
    },function(){ 
        $(this).parent().children("#op2").hide();    
    });    
第二种
$("#d1").hover(function(e) {
        $("#d2").show(); 
    },function(){ 
        $("#d2").hide(); 
    });
    $("#d2").hover(function(){//对按钮的处理 
        $("#d2").show(); 
    },function(){ 
        $("#d2").hide();    
    }); 
鼠标移上去显示一个下拉,移开下拉隐藏

区别是 $(this).parent().children("#op2").hide();    找到父类级别,在定位子级
parent() 获得当前匹配元素集合中每个元素的父元素,使用选择器进行筛选是可选的。

children找到类名为 "selected" 的所有 div 的子元素,并将其设置为蓝色:
$("div").children(".selected").css("color", "blue");

你可以使用 HTML、CSS 和 JavaScript 来实现显示隐藏下拉菜单。下面是一个示例: 1. HTML 代码: ``` <ul> <li onmouseover="showMenu('menu1')" onmouseout="hideMenu('menu1')"> <a href="#">标题1</a> <ul id="menu1"> <li><a href="#">下拉菜单1</a></li> <li><a href="#">下拉菜单2</a></li> <li><a href="#">下拉菜单3</a></li> </ul> </li> <li onmouseover="showMenu('menu2')" onmouseout="hideMenu('menu2')"> <a href="#">标题2</a> <ul id="menu2"> <li><a href="#">下拉菜单4</a></li> <li><a href="#">下拉菜单5</a></li> <li><a href="#">下拉菜单6</a></li> </ul> </li> </ul> ``` 2. CSS 代码: ``` ul { list-style: none; margin: 0; padding: 0; } li { position: relative; display: inline-block; margin-right: 20px; } ul ul { position: absolute; top: 100%; left: 0; display: none; list-style: none; padding: 0; margin: 0; } li:hover > ul { display: block; } a { color: black; text-decoration: none; } li:hover > a { color: red; } ``` 3. JavaScript 代码: ``` function showMenu(id) { var menu = document.getElementById(id); menu.style.display = 'block'; } function hideMenu(id) { var menu = document.getElementById(id); menu.style.display = 'none'; } ``` 当鼠标经过标题1或标题2时,JavaScript 函数将显示相应的下拉菜单,并将标题的字体颜色更改为红色。当鼠标移开标题1或标题2时,JavaScript 函数将隐藏相应的下拉菜单,并将标题的字体颜色恢复为初始状态。注意,此示例仅用于演示目的,并且需要根据你的具体需求进行修改。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值