CSS或者JS实现鼠标悬停显示另一元素

时间:2024-10-14 19:04:14

想达到鼠标悬停到元素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 样式如下:需要设置width: 100%, position:absolute.
通过b下面的div来为其中的元素定位,该div也就是例子中的c,设置居中:
.c {
width: 1280px;
margin: auto;
}。
元素a样式:.b {
height: 40px;
width: 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;
}