1.如何实现鼠标离开后由hover设置的显示样式不变，同时由hover弹出的隐藏框也不消失，并且只有在鼠标经过其他hover时才使之前的样式消失？

用js吧 mouseover的时候其他元素removeClass，当前元素addClass

如何设置鼠标离开时由hover设置的样式不变？

1.用js添加延时处理

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style> 
            #div1{
                height: 100px;
                width: 100px;
                background: #000000;    
                position: relative;
                }
            #div2{ 
                height: 200px;
                width: 100px;
                background: #00A1D6;                
                display: none;
                position: absolute;
                left: 0;
                top: 130px;
                }    
        </style>
        <script>
            window.onload=function(){
            var a=document.getElementById('div1')
            var b=document.getElementById('div2')
            var x=null
        b.onmouseover=a.onmouseover=function(){
                b.style.display='block';
                clearTimeout(x);
            }
        b.onmouseout=a.onmouseout=function(){
            x=setTimeout(function(){b.style.display='none';
        },1000)
            }
            }
        </script>
    </head>
    <body>
        <div id="div1">        
            <div id="div2"></div>
        </div>        
    </body>
</html>

2.css，与目标没间隙的话把隐藏框放在你hover的目标中，用absolute定位，hover目标display:block;
3.css，有间隙的话用伪元素

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style> 
            #div1{
                height: 100px;
                width: 100px;
                background: #000000;    
                position: relative;
                }
            #div2{ 
                height: 0px;
                width: 100px;
                background: #00A1D6;                        
                position: absolute;
                left: 0;
                top: 130px;
                transition: all 0.4s ease;   
                overflow: hidden;    
                }    
            #div2:before{
                background: transparent;
                position: absolute;
                top: -30px;
                left: 0;
                display: block;
                height: 30px;
                width: 100%;
            }    
            #div1:hover #div2{    
                height: 300px;
                overflow: visible;
            }
            #div1:hover    #div2:before{
                content: '';
            }
        </style>
    </head>
    <body>
        <div id="div1">        
            <div id="div2">111</div>
        </div>        
    </body>
</html>

如何设置鼠标离开时由hover设置的样式不变？

你尚未登录，登录后可以

js 如何将Key属性相同的放在同一个数组？

Next.js做纯前端是否可行？

如何实现一个深拷贝函数？

git提交记录问题？

body :first-child(不是body:first-child，中间有空格)伪类选择器到底选中了什么元素？

怎么获取动态弹出对话框的模拟单击？

如何实现类似豆包的AI改写框跟随内容滚动效果？