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属性相同的放在同一个数组？

vue项目如何在初始化之前跳转外部页面？

js如何控制移动端overflow:scroll容器滑动的最大速度？

前端代码更新如何通知用户刷新页面？

纯css如何绘制一个无背景色有边框色，带有文字的倒等腰梯形？

css布局怎么保证右边一直在可视范围内？

为什么会出现CORS error？