bootstrap鼠标点击弹出菜单,鼠标经过弹出菜单

<ul class="nav navbar-nav user-menu navbar-right">
    <li class="dropdown user-avatar">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
           aria-expanded="false" style="padding: 0px;">
            <img style="width:32px;height: 32px" alt="{{ Auth()->user()->name }}"
                 src="{{ route('website.image.avatar',['avatar_name'=>Auth()->user()->id.'_middle'])}}">
        a>
        <ul class="dropdown-menu" role="menu" style="background-color: #133340">
            <li><a href="{{ route('auth.profile.base') }}">用户中心a>li>
            <li><a href="{{ route('auth.businss.base') }}">预定展位a>li>
            <li><a href="{{route('auth.businss.layout')}}">布置展位a>li>
            <li><a href="{{ route('auth.businss.base') }}">展商资料a>li>
            <li><a href="{{ route('productdae.index') }}">启用展馆a>li>
            <li><a href="{{ route('auth.user.logout') }}">退出登录a>li>
        ul>
    li>
ul>

以上为点击用户头像出现下拉菜单实例,如果需要鼠标经过弹出下拉菜单需在页面添加如下JS

$(function(){
    $('li.dropdown').mouseover(function() {
        $(this).addClass('open');    }).mouseout(function() {        $(this).removeClass('open');    });
});

你可能感兴趣的:(前端技巧)