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

将transition属性移动到基类（而不是伪类：hover），并在过渡中添加width属性。

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

当前代码存在的问题是仅当鼠标悬停元素时才会发生转换。如果要将动画缩放回原始状态，则即使悬停不起作用，也必须激活transition css属性。

如何使用扩展父容器拉伸SVG？

1 个答案: