js hover 下拉框

最新推荐文章于 2022-12-21 12:09:07 发布

weixin_30879169

最新推荐文章于 2022-12-21 12:09:07 发布

阅读量152

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/chen527/p/9591818.html

本文介绍了一个使用CSS样式和JavaScript实现元素显示隐藏效果的例子。通过鼠标悬停和点击事件来控制HTML元素的显示与隐藏，并利用类选择器实现特定样式的切换。

　　　　<div class="box">
            <div class="a f">111111</div>
            <div class="a-box">
                <div class="b d">111111</div>
                <div class="b">222222</div>
                <div class="b">333333</div>
            </div>
        </div>

    .box {
                width: 100px;
            }
            
            .a,
            .b {
                width: 200px;
                height: 30px;
                background: red;
                /*border: 1px solid #000;*/
            }
            
            .a.f:after {
                content: url(x-.g.png);
                width: 10px;
                height: 10px;
                display: inline-block;
            }
            
            .a-box {
                display: none;
            }
            
            .a:after {
                content: url(d-g.png);
                width: 10px;
                height: 10px;
                display: inline-block;
            }
            /*.b:after {
            content: url(x-.g.png);
            width: 10px;
            height: 10px;
            display: inline-block;
        　　}*/
            
            .d {
                display: none;
            }

$(function() {
                $('.box').on('mouseenter', function() {
                    $('.a-box').css('display', 'block');
                    $(".a").removeClass('f');
                })
                $('.box').on('mouseleave', function() {
                    $('.a-box').css('display', 'none');
                    $(".a").addClass('f');
                })
                $('.box').on('click', '.a', function() {
                    $('.a-box').css('display', 'none');
                    $(".a").addClass('f');
                })
                $('.a-box').on('click', '.b', function() {
                    $('.d').removeClass('d');
                    $(this).addClass('d');
                    $('.a').remove();
                    $('.box').prepend($(this).clone().attr('class', 'a f'));
                    $('.a-box').css('display', 'none');
                })
            })