带有 SVG 的 CSS3 简单过渡 : appearing and disappearing on mouse :hover

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>