Question

我正在尝试使用两个项目进行简单的css3过渡工作：svg框（表示svg绘制的徽标）和后面的<p>标记（表示标题名称标记）。 / p>

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

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

//带有代码段

中的答案的更新代码

＆＃13;

* {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);
}

＆＃13;

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

＆＃13;

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>

使用SVG进行CSS3简单转换：在鼠标上显示和消失：悬停

1 个答案: