我看不到我在做什么错,所以也许其他人会!

来了:我在svg中做了一个Facebook按钮。当我将鼠标悬停在按钮上时,我希望它使用嵌入式阴影“沉入背景”。

这是svg:

    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 400 400" style="enable-background:new 0 0 400 400;" xml:space="preserve">

     <style type="text/css">
    .st0{fill:#FFE06B;}
    .st1{fill:#F7C411;}
    .st2{fill:#FF9900;}
    g#shadow {display:none;}
    g#shadow:hover {display:block;}
</style>

<g id="layer_1">
    <circle class="st0" cx="200" cy="200" r="200"/>
</g>
<g id="shadow">
    <path class="st1" d="M4,204C4,93.543,93.543,4,204,4c54.211,0,103.375,21.578,139.398,56.602C307.059,23.228,256.246,0,200,0
        C89.543,0,0,89.543,0,200c0,56.245,23.227,107.058,60.602,143.397C25.578,307.374,4,258.211,4,204z"/>
    <g>
        <path class="st1" d="M246.379,103.232v33.333h-18.138c-5.393,0-8.823,1.471-10.539,4.412c-1.226,1.961-1.716,5.392-1.716,10.049
            v15.196h30.883l-3.677,33.579h-27.206v96.815h-39.952v-96.815h-19.608v-33.579h19.608v-20.099
            c0-20.588,7.108-33.824,21.079-39.461c6.863-2.696,12.745-3.431,18.873-3.431H246.379z"/>
    </g>
</g>
<g id="layer_3">
    <g>
        <path class="st2" d="M242.524,99.145v33.333h-18.138c-5.393,0-8.823,1.471-10.539,4.412c-1.226,1.961-1.716,5.392-1.716,10.049
            v15.196h30.883l-3.677,33.579h-27.206v96.815H172.18v-96.815h-19.608v-33.579h19.608v-20.099c0-20.588,7.108-33.824,21.079-39.461
            c6.863-2.696,12.746-3.431,18.874-3.431H242.524z"/>
    </g>
</g>
</svg>


当我将鼠标悬停在其上时,应显示ID为“阴影”的组,但不显示。谁看到我的错误?

谢谢

汤姆

最佳答案

阴影元素为display:none,因此不渲染。没有什么可悬停的了。

当您将鼠标悬停在按钮上的任意位置时,这会打开阴影。还有一个额外的隐藏圆圈可以捕获所有事件,而前景是指针事件:没有,因此不会干扰悬停事件的捕获。



<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 400 400" style="enable-background:new 0 0 400 400;" xml:space="preserve">

     <style type="text/css">
    .st0{fill:#FFE06B;}
    .st1{fill:#F7C411;}
    .st2{fill:#FF9900;}
    g#shadow {visibility:hidden;pointer-events:all}
    g#shadow:hover {visibility:visible;}
</style>

<g id="layer_1">
    <circle class="st0" cx="200" cy="200" r="200"/>
</g>
<g id="shadow">
    <path class="st1" d="M4,204C4,93.543,93.543,4,204,4c54.211,0,103.375,21.578,139.398,56.602C307.059,23.228,256.246,0,200,0
        C89.543,0,0,89.543,0,200c0,56.245,23.227,107.058,60.602,143.397C25.578,307.374,4,258.211,4,204z"/>
    <g>
        <path class="st1" d="M246.379,103.232v33.333h-18.138c-5.393,0-8.823,1.471-10.539,4.412c-1.226,1.961-1.716,5.392-1.716,10.049
            v15.196h30.883l-3.677,33.579h-27.206v96.815h-39.952v-96.815h-19.608v-33.579h19.608v-20.099
            c0-20.588,7.108-33.824,21.079-39.461c6.863-2.696,12.745-3.431,18.873-3.431H246.379z"/>
    </g>
    <circle visibility="hidden" cx="200" cy="200" r="200"/>
</g>
<g id="layer_3" pointer-events="none">
    <g>
        <path class="st2" d="M242.524,99.145v33.333h-18.138c-5.393,0-8.823,1.471-10.539,4.412c-1.226,1.961-1.716,5.392-1.716,10.049
            v15.196h30.883l-3.677,33.579h-27.206v96.815H172.18v-96.815h-19.608v-33.579h19.608v-20.099c0-20.588,7.108-33.824,21.079-39.461
            c6.863-2.696,12.746-3.431,18.874-3.431H242.524z"/>
    </g>
</g>
</svg>

关于css - 悬停在svg中的阴影,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/32481969/

10-12 03:29
查看更多