带有 SVG 的 CSS3 简单过渡：在鼠标上出现和消失：悬停答案

【问题标题】：CSS3 Simple Transition with SVG: appearing and disappearing on mouse :hover带有 SVG 的 CSS3 简单过渡：在鼠标上出现和消失：悬停
【发布时间】：2017-10-09 19:16:48
【问题描述】：

我正在尝试使用两个项目制作一个简单的 css3 过渡：一个 svg 框（代表一个 svg 绘制的徽标）和一个 <p> 标签（代表一个标题名称标签）。

默认情况下，只有框应该显示并且文本应该被隐藏。当鼠标悬停在 svg 框上时，该框应该以简单的 css 淡入淡出过渡消失（或者甚至更好的阴影模糊以获得奖励积分；-）然后名称标题应该看起来集中（来自阴影模糊），所有这些都在 1 秒内.

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

// 在 sn-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>

【问题讨论】：

标签： css svg css-selectors hover transitions

【解决方案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>

【讨论】：