鼠标移入侧边栏一级菜单后,二级菜单显示

本文介绍使用HTML、CSS及jQuery实现一个简单的鼠标悬停显示二级菜单的效果,并提供了两种实现方式,一种使用show/hide方法,另一种使用css方法。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

就是简简单单的一个小功能,鼠标移入侧边栏的一级菜单后,相对应的二级菜单显示。
效果大概如图:
当鼠标移动到“购物”时,显示右侧“详情3”

CSS:

<style>
    * {
        margin: 0;
        padding: 0;
    }
    .wrap {
        width: 150px;
        position: relative;
        margin: 10px 0 0 10px;
        background-color: #c0c0c0;
    }
    .wrapper {
        list-style: none;
        margin-left: 5px;
        height: 40px;
        line-height: 40px;
        cursor: pointer;
        position: relative;
    }
    .wrapper_a {
        text-decoration: none;
        color: #000000;
    }
    .wrap ul li a {
        display: inline-block;
        width: 100%;
        height: 100%;
    }
    .wrap ul li a:hover {
        color: #ffffff;
    }
    .details_wrap {
        width: 100px;
        height: 40px;
        line-height: 40px;
        background-color: #666666;
        position: absolute;
        left: 100%;
        top: 0;
        padding-left: 5px;
        list-style: none;
        display: none;
    }
    .details_wrap a {
        text-decoration: none;
        color: darkgrey;
    }
    .details_wrap a:hover {
        color: dimgray;
    }
</style>

HTML:

<div class="wrap">
    <ul>
        <li class="wrapper">
            <a href="#" class="wrapper_a">居家</a>
            <ul>
                <li class="details_wrap"><a href="#" class="details">详情1</a></li>
            </ul>
        </li>
        <li class="wrapper">
            <a href="#" class="wrapper_a">生活</a>
            <ul>
                <li class="details_wrap"><a href="#" class="details">详情2</a></li>
            </ul>
        </li>
        <li class="wrapper">
            <a href="#" class="wrapper_a">购物</a>
            <ul>
                <li class="details_wrap"><a href="#" class="details">详情3</a></li>
            </ul>
        </li>
        <li class="wrapper">
            <a href="#" class="wrapper_a">科普</a>
            <ul>
                <li class="details_wrap"><a href="#" class="details">详情4</a></li>
            </ul>
        </li>
    </ul>
</div>

JS:

<script src="../jquery-1.11.0.min.js"></script>
<script>
    $(document).ready(function(){
        方法一:
        $(".wrapper").mouseover(function () {
            $(".details_wrap",this).show();
        }).mouseout(function () {
            $(".details_wrap",this).hide();
        });

        $(".details_wrap").mouseover(function () {
            $(".details_wrap",this).show();
        }).mouseout(function () {
            $(".details_wrap",this).hide();
        })

        方法二:
        $(".wrapper").mouseover(function () {							          $(this).find(".details_wrap").css('display','block');
        }).mouseout(function () {            $(this).find(".details_wrap").css('display','none');
        })
    })
</script>

不知道为啥,方法二的格式有错误,请自行调整。
两只小菜鸟被这个搞了一下午,但依然存在很多疑问。比如,方法一中mouseover前为什么选择wrapper而不能是其他?
请指教啊。

另外,还有没有其他的方法?
不吝赐教啊。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值