Wu Yudong's Blog

今天要实现的功能如标题所示，可以使用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';
});