工学1号馆

home

css3 实现鼠标放到一个div上显示出另一个隐藏的div

Wu Yudong    April 23, 2024     HTML5+CSS3   40   

今天要实现的功能如标题所示,可以使用css中hover来显示和隐藏其他元素,如子元素,兄弟元素等(不用js、jquery做展示或隐藏)

.Hx {
    display: none;
    z-index: 9999;
    position: absolute;
    inset: 0px auto auto 0px;
    margin: 0px;
    transform: translate3d(18px, 96px, 0px);
}

.hh :hover+ .Hx {
    display: block;
}

其中Hx是hh的子元素div

但是这种情况会出现一个问题,如果想把鼠标移到子div就会发现子div消失,解决这个的方法是采用js:

document.getElementById('hh').addEventListener('mouseover', function() {
    document.getElementById('hx').style.display = 'block';
});

document.getElementById('hx').addEventListener('mouseout', function(event) {
    document.getElementById('hx').style.display = 'none';
});

 

如果文章对您有帮助,欢迎点击下方按钮打赏作者

Comments

No comments yet.
To verify that you are human, please fill in "七"(required)