css - 如何使用扩展的父容器拉伸(stretch) SVG？

Question

我有一个包含两个内联 SVG 的 div。当用户将鼠标悬停在该 div 上时，我使用 CSS 转换将其高度加倍。我希望 SVG 的高度随着父 div 的变化而缩放。

目前，当我将鼠标悬停在父 div 上时，它的高度会正确改变，SVG 的高度也是如此，但是当我鼠标移开时，它们的高度会立即缩小到其原始值，like this .

HTML:

<div id="nav">
    <div id="logo">Time Capsule</div>
    <div id="navButtons">
        <a href="#" id="loginBttn">
            <svg height="100%" viewBox="0 0 50 50" id="loginSVG">
                <circle cx="25" cy="25" r="25" stroke="none" fill="blue" class="background" />
                <polyline points="15,10, 35,10, 35,40, 15,40" style="stroke:white; stroke-width:4; fill:none" class="door"/>
                <g id="arrow">
                    <line x1="25" y1="25" x2="10" y2="25" style="stroke:white; stroke-width:4" class="arrowSpine"/>
                    <polyline points="15,20,10,25,15,30" style="stroke:white; stroke-width:4; fill:none" class="arrowPoint" />
                </g>
            </svg>
        </a>
        <a href="register.php">
            <svg height="100%" viewBox="0 0 50 50" id="loginSVG">
                <circle cx="25" cy="25" r="25" stroke="none" fill="blue" class="background" />
                <line x1="10" x2="40" y1="25" y2="25" style="stroke:white; stroke-width:4" />
                <line x1="25" x2="25" y1="10" y2="40" style="stroke:white; stroke-width:4" />
            </svg>
        </a>
    </div>
</div>

CSS:

#nav { background-color:#000; width:100%; height:50px; transition:height 0.5s; }
#nav svg { height:50px; width:50px; }
#nav:hover { height:100px; transition:height 0.5s; }
#nav:hover svg { height:100px; width:100px; transition:height 0.5s; }
#nav:hover svg .background { height:100px; width:100px; transition: height 0.5s; }
#nav #logo { color:white; float:left; }
#nav #navButtons { float:right; top:-20px; }

有没有办法只用 css 来修复鼠标悬停行为？我知道我可以使用 javascript，但我很好奇是否可以进行仅 css 修复。

Answer 1

将过渡属性移至基类(而不是伪类 :hover)并在过渡中添加宽度属性。

#nav svg {
   transition:height 0.5s, width 0.5s;
}

您当前代码的问题在于，仅当鼠标悬停 元素时才会发生转换。如果您想通过动画缩放回到原始状态，即使悬停未生效，transition css 属性也需要处于事件状态。