首页 > Web开发 > 详细

对于jq实现带有二级导航的,鼠标移入移出改变css属性样式

时间:2020-04-14 19:29:54      阅读:70      评论:0      收藏:0      [点我收藏+]

1、布局:一级导航用ul li ,二级导航在li 里面可以嵌套div实现

<li class="pull-active">
    <a href="">资讯</a>
    <!-- 二级导航 -->
    <div class="ul ulH3">
        <div class="li">
            <a href="">活动</a>
        </div>
        <div class="li">
            <a href="">通知</a>
        </div>
        <div class="li">
            <a href="">新闻</a>
        </div>
        <div class="li">
            <a href="">政策</a>
        </div>
    </div>
</li>

2、交互:鼠标移入改变背景和字体颜色,移除去掉。

$(".pull-active").mouseover(function () {
        this.style.background = ‘#f39800‘;
        this.style.borderRadius = ‘5px‘;
        this.style.color = "white";
        $(this).children(‘.ul‘).fadeIn().css("display",‘block‘);
    }).mouseleave(function () {
        $(this).children(‘.ul‘).fadeOut().css("display", ‘none‘);
        this.style.background = ‘none‘;
        this.style.color = ‘none‘;
 });

 

对于jq实现带有二级导航的,鼠标移入移出改变css属性样式

原文:https://www.cnblogs.com/jervy/p/12699911.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!