CSS3 SVG的簡單過渡：在鼠標上出現和消失：懸停

Question

我正在嘗試使用兩個項目進行簡單的css3過渡：一個svg框（代表svg繪制的徽標）和后面的<p>標記（代表標題名稱標簽）。

默認情況下，只應顯示該框，而文本則應隱藏。 當鼠標懸停在svg框上時，該框應消失，並帶有簡單的css淡入淡出過渡（或什至更好的陰影模糊以獲得加分；-），然后名稱標題應該看起來集中（從陰影模糊）到1秒鍾。

目前，由於代碼被破壞以激活鼠標懸停，我被困在這里。 我現階段在做什么錯？ svg:hover p不是我最后一步的正確選擇器嗎？ 以及如何設置過渡淡入淡出效果？ 謝謝！

//片段中帶有Answer的更新代碼

 * {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和段落都放置在容器內，並將懸停效果設置為對容器起作用。 對於過渡，請在每個元素上使用transition屬性，或僅將其放在父元素的所有子元素上。 像這樣：

<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>