CSS3 使用 SVG 的简单过渡：鼠标悬停时出现和消失

Question

我正在尝试使用两项进行简单的 css3 转换：svg 框（代表 svg 绘制徽标）和 <p> 标签（代表标题名称标签）在它后面。

默认情况下只显示框，隐藏文本。当鼠标悬停在 svg 框上时，该框应该消失并带有一个简单的 css 淡入淡出过渡（或者甚至更好的奖励点阴影模糊 ;-) 然后名称标题应该显示为焦点（来自阴影模糊）所有比如说 1 秒。

目前我被困在这里，因为我的代码无法激活鼠标悬停。我在这个阶段做错了什么？ svg:hover p 不是我最后一步的正确选择器吗？以及如何设置过渡淡入淡出效果？谢谢！

// 更新了代码片段中的答案

* {margin: 0; padding: 0;}

.svg-container * {
    -webkit-transition: all 1000ms ease;
    -moz-transition: all 1000ms ease;
    -o-transition: all 1000ms ease;
    -ms-transition: all 1000ms ease;
    transition: all 1000ms ease;
}

svg {
    position: absolute;
    fill: rgba(0, 200, 0, 1);
    z-index: 2;
    top: 0;
    left: 0;
    display: block;
    opacity: 1;
}

p {
    position: absolute;
    z-index: 1;
    top:70px;
    display: block;
    color: rgba(0,0,200,0);
}

.svg-container:hover svg {
    opacity: 0;
}

.svg-container:hover p {
    color: rgba(0,0,200,1);
}

<div class="svg-container">
    <svg width="100" height="100" viewBox="0 0 100 100">
      <rect x="10" y="10" width="100" height="100"/>
    </svg>
    <p>Title of this Website</p>
</div>

Answer 1

您不能在 SVG 中放置元素。您应该将 SVG 和段落都放在容器中，并将悬停效果设置为作用于容器。对于过渡，在每个元素上使用过渡属性，或者将它放在父元素的所有子元素上。像这样：

<style type="text/css">
    * {margin: 0; padding: 0;}

    .svg-container * {
        -webkit-transition: all 1000ms ease;
        -moz-transition: all 1000ms ease;
        -o-transition: all 1000ms ease;
        -ms-transition: all 1000ms ease;
        transition: all 1000ms ease;
    }

    svg {
        position: absolute;
        fill: rgba(0, 200, 0, 1);
        z-index: 2;
        top: 0;
        left: 0;
        display: block;
        opacity: 1;
    }

    p {
        position: absolute;
        z-index: 1;
        top:70px;
        display: block;
        color: rgba(0,0,200,0);
    }

    .svg-container:hover svg {
        opacity: 0;
    }

    .svg-container:hover p {
        color: rgba(0,0,200,1);
    }
</style>

    <div class="svg-container">
        <svg width="100" height="100" viewBox="0 0 100 100">
          <rect x="10" y="10" width="100" height="100"/>
        </svg>
        <p>Title of this Website</p>
    </div>

CSS3 使用 SVG 的简单过渡：鼠标悬停时出现和消失

CSS3 Simple Transition with SVG: appearing and disappearing on mouse :hover

css

svg

hover

css-selectors

transitions