：hover上闪烁的svg组？

时间：2018-07-31 15:14:22

标签： html css

将鼠标悬停在svg上方时，我试图使“ HI” svg组消失并显示“ BYE”形状。相反，它在两个组之间快速闪烁-我不确定我是否弄乱了分组或其他内容，但会有所帮助。

        svg { height: 30vw; display: block; margin: auto;}

        .section:hover #bye.show { display: block; }
        .section:hover #hi.hide { display: none; }            
<body>       

    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 360 360">

        <a class="section" xlink:href="https://google.com" target="_blank">         
            <g id="bye" class="show">
                <g>
                <rect x="48.685" y="51.107" fill="#00AEEF" width="262.63" height="257.785"/>                    
                <path d="M154.537,168.045c1.444-0.304,3.723-0.531,6.041-0.531c3.306,0,5.433,0.569,7.029,1.861
                    c1.33,0.988,2.128,2.508,2.128,4.521c0,2.47-1.634,4.635-4.332,5.623v0.076c2.432,0.607,5.281,2.621,5.281,6.421
                    c0,2.204-0.874,3.875-2.166,5.129c-1.786,1.634-4.673,2.394-8.853,2.394c-2.279,0-4.027-0.151-5.129-0.304V168.045z M157.842,178.531h3.002c3.495,0,5.547-1.823,5.547-4.293c0-3.002-2.28-4.18-5.623-4.18c-1.52,0-2.394,0.114-2.926,0.229V178.531z M157.842,190.804c0.646,0.114,1.596,0.152,2.774,0.152c3.419,0,6.573-1.254,6.573-4.978c0-3.495-3.001-4.939-6.611-4.939h-2.736
                    V190.804z M180.262,193.312v-10.866l-8.093-14.742h3.761l3.609,7.067c0.988,1.938,1.748,3.495,2.546,5.281h0.076
                    c0.722-1.672,1.596-3.344,2.583-5.281l3.686-7.067h3.762l-8.587,14.704v10.904H180.262z M208.114,181.306h-9.954v9.232h11.094v2.773h-14.399v-25.608h13.83v2.773H198.16v8.093h9.954V181.306z"/>  
                </g>
            </g>
        </a>

        <a class="section" xlink:href="https://google.com" target="_blank">
            <g id="hi" class="hide">
                <g>
                <rect x="48.685" y="51.107" fill="#ED1C24" width="262.63" height="257.785"/>                
                <path d="M170.42,167.703v10.715h12.387v-10.715h3.343v25.608h-3.343v-12.006H170.42v12.006h-3.305v-25.608H170.42z"/>
                <path d="M195.196,167.703v25.608h-3.306v-25.608H195.196z"/>  
                </g>                  
            </g>
        </a>
    </svg>
</body>

2 个答案:

答案 0 :(得分：1)

仅将鼠标悬停，然后将其应用于svg而不是.section 

svg {
  height: 30vw;
  display: block;
  margin: auto;
}

svg:hover #hi.hide {
  display: none;
}
<body>

  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 360 360">

        <a class="section" xlink:href="https://google.com" target="_blank">         
            <g id="bye" class="show">
                <g>
                <rect x="48.685" y="51.107" fill="#00AEEF" width="262.63" height="257.785"/>                    
                <path d="M154.537,168.045c1.444-0.304,3.723-0.531,6.041-0.531c3.306,0,5.433,0.569,7.029,1.861
                    c1.33,0.988,2.128,2.508,2.128,4.521c0,2.47-1.634,4.635-4.332,5.623v0.076c2.432,0.607,5.281,2.621,5.281,6.421
                    c0,2.204-0.874,3.875-2.166,5.129c-1.786,1.634-4.673,2.394-8.853,2.394c-2.279,0-4.027-0.151-5.129-0.304V168.045z M157.842,178.531h3.002c3.495,0,5.547-1.823,5.547-4.293c0-3.002-2.28-4.18-5.623-4.18c-1.52,0-2.394,0.114-2.926,0.229V178.531z M157.842,190.804c0.646,0.114,1.596,0.152,2.774,0.152c3.419,0,6.573-1.254,6.573-4.978c0-3.495-3.001-4.939-6.611-4.939h-2.736
                    V190.804z M180.262,193.312v-10.866l-8.093-14.742h3.761l3.609,7.067c0.988,1.938,1.748,3.495,2.546,5.281h0.076
                    c0.722-1.672,1.596-3.344,2.583-5.281l3.686-7.067h3.762l-8.587,14.704v10.904H180.262z M208.114,181.306h-9.954v9.232h11.094v2.773h-14.399v-25.608h13.83v2.773H198.16v8.093h9.954V181.306z"/>  
                </g>
            </g>
        </a>

        <a class="section" xlink:href="https://google.com" target="_blank">
            <g id="hi" class="hide">
                <g>
                <rect x="48.685" y="51.107" fill="#ED1C24" width="262.63" height="257.785"/>                
                <path d="M170.42,167.703v10.715h12.387v-10.715h3.343v25.608h-3.343v-12.006H170.42v12.006h-3.305v-25.608H170.42z"/>
                <path d="M195.196,167.703v25.608h-3.306v-25.608H195.196z"/>  
                </g>                  
            </g>
        </a>
    </svg>
</body>

答案 1 :(得分：0)

让多个按钮像这样

        svg {
            height: 30vw;
            display: block;
            margin: auto;
        }
        
        .show{
            display: none;
        }

        .section:hover #hi.hide {
            display: none;
        } 
        .section:hover #bye.show {
            display: block;
        }   

        .section:hover #red.hide {
            display: none;
        }  
        .section:hover #blue.show {
            display: block;
        }  
<body>        
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 743 360">
        <g class="section">
            <a xlink:href="https://google.com" target="_blank">         
                <g id="bye" class="show">
                    <g>
                        <rect x="48.685" y="51.107" fill="#00AEEF" width="262.63" height="257.785"/>                                
                        <path d="M154.537,168.045c1.444-0.304,3.723-0.531,6.041-0.531c3.306,0,5.433,0.569,7.029,1.861
                            c1.33,0.988,2.128,2.508,2.128,4.521c0,2.47-1.634,4.635-4.332,5.623v0.076c2.432,0.607,5.281,2.621,5.281,6.421
                            c0,2.204-0.874,3.875-2.166,5.129c-1.786,1.634-4.673,2.394-8.853,2.394c-2.279,0-4.027-0.151-5.129-0.304V168.045z
                                M157.842,178.531h3.002c3.495,0,5.547-1.823,5.547-4.293c0-3.002-2.28-4.18-5.623-4.18c-1.52,0-2.394,0.114-2.926,0.229V178.531z
                                M157.842,190.804c0.646,0.114,1.596,0.152,2.774,0.152c3.419,0,6.573-1.254,6.573-4.978c0-3.495-3.001-4.939-6.611-4.939h-2.736
                            V190.804z"/>
                        <path d="M180.262,193.312v-10.866l-8.093-14.742h3.761l3.609,7.067c0.988,1.938,1.748,3.495,2.546,5.281h0.076
                            c0.722-1.672,1.596-3.344,2.583-5.281l3.686-7.067h3.762l-8.587,14.704v10.904H180.262z"/>
                        <path d="M208.114,181.306h-9.954v9.232h11.094v2.773h-14.399v-25.608h13.83v2.773H198.16v8.093h9.954V181.306z"/>
                            
                    </g>
                </g>
            </a>       
            <a xlink:href="https://google.com" target="_blank">
                <g id="hi" class="hide">
                    <g>
                        <rect x="48.685" y="51.107" fill="#ED1C24" width="262.63" height="257.785"/>                            
                        <path d="M170.42,167.703v10.715h12.387v-10.715h3.343v25.608h-3.343v-12.006H170.42v12.006h-3.305v-25.608H170.42z"/>
                        <path d="M195.196,167.703v25.608h-3.306v-25.608H195.196z"/>                            
                    </g>                  
                </g>
            </a>
        </g>
        <g class="section">
            <a xlink:href="https://google.com" target="_blank">         
                <g id="blue" class="show">
                    <g>
                        <rect x="338.685" y="51.107" fill="#ED1C24" width="262.63" height="257.785"/>
                    </g>
                </g>
            </a>      
            <a xlink:href="https://google.com" target="_blank">
                <g id="red" class="hide">
                    <g>
                        <rect x="338.685" y="51.107" fill="#00AEEF" width="262.63" height="257.785"/>  
                    </g>                  
                </g>
            </a>
        </g>
    </svg>
</body>

相关问题
最新问题