鍍金池/ 問答/HTML/ 如何設(shè)置鼠標(biāo)離開時(shí)由hover設(shè)置的樣式不變？

如何設(shè)置鼠標(biāo)離開時(shí)由hover設(shè)置的樣式不變？

1.如何實(shí)現(xiàn)鼠標(biāo)離開后由hover設(shè)置的顯示樣式不變，同時(shí)由hover彈出的隱藏框也不消失，并且只有在鼠標(biāo)經(jīng)過其他hover時(shí)才使之前的樣式消失？

回答
編輯回答
淺時(shí)光

1.用js添加延時(shí)處理

<!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，與目標(biāo)沒間隙的話把隱藏框放在你hover的目標(biāo)中，用absolute定位，hover目標(biāo)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>
2017年10月27日 07:33
編輯回答
未命名

用js吧
mouseover的時(shí)候 其他元素removeClass，當(dāng)前元素addClass

2017年6月5日 06:37