zoukankan      html  css  js  c++  java
  • CSS或者JS实现鼠标悬停显示另一元素

    想达到鼠标悬停到元素a上,显示另一个元素b,可以通过css实现也可以通过js实现。
    js:
    写两个函数:mouseenter,mouseleave,例如:其中
    $("#a").mouseenter(function() {
    $("#b").show("normal");
    });
    $("#a").mouseleave(function() {
    $("#b").hide("normal");
    });


    css:a元素和b元素需要满足一定的关系,即b是a的直接子元素:如下html元素,div header_login_name_change 是a元素,ul header_login_menu是b元素。
    在a元素上写hover,后面是b元素
    <div id="a" class="a">
        <a class="content"><span id="txt">苹果</span></a>
        <a class="role_down"></a>
        <ul class="b">
            <li class="role">栗子</li>
        </ul>
    </div>
    css,display: block;
    .a:hover .b {
    display:block;
    background: #2B7193;
    cursor: pointer;
    }

    另外,如果元素b宽度需要满屏,而其中的元素又有距离左边距离等,则b 样式如下:需要设置 100%, position:absolute.
    通过b下面的div来为其中的元素定位,该div也就是例子中的c,设置居中:
    .c {
    1280px;
    margin: auto;
    }。
    元素a样式:.b {
    height: 40px;
    100%;
    background-color: #2a7193;
    position: absolute;
    z-index: 10006;
    display: none;
    margin-top: -5px;
    left: 0;
    }

    这样c中的元素可以相对c来定位,无论电脑屏幕有多宽,都不会变形。
    html代码:
    <div class="a" id="a">
        <div class="btn"></div>
        <div id="b" class="b">
            <div class="c">
                <div class="rcontent" id="content">
                    <a class="dropdown_content">
                        <span>花生</span>
                    </a>
                </div>
            </div>
        </div>
    </div>

    对应的css:
    #a:hover .b{
    display: block;
    }

  • 相关阅读:
    Windows Server 2012配置开机启动项
    Windows Server 2019 SSH Server
    NOIP2017 senior A 模拟赛 7.7 T1 棋盘
    Noip 2015 senior 复赛 Day2 子串
    Noip 2015 senior复赛 题解
    Noip 2014 senior Day2 解方程(equation)
    Noip 2014 senior Day2 寻找道路(road)
    Noip 2014 senior Day2 无线网络发射器选址(wireless)
    Noip2014senior复赛 飞扬的小鸟
    Noip 2014 senior 复赛 联合权值(link)
  • 原文地址:https://www.cnblogs.com/yunyunde/p/5148260.html
Copyright © 2011-2022 走看看