Question

我正在尝试在Div Hover上创建两个过渡效果。首先绘制一个圆圈，文本也会随圆圈一起出现。

我编写了以下代码，首先绘制圆圈，然后绘制文本。我希望这两件事都能有意义地发生。请检查我的代码并指导我。

<div class="outer"> 
    <div class="inner"> 
        <div class="text">  Description </div>
    </div>
</div>

CSS

    <style>
    body
    {
        background-color:black;
    }

    .outer
    {
        background-color:green;
        position:absolute;
        top:50px;
        height:200px;
        width:200px;
        border-radius:50%;
        border:10px solid white;
        overflow:hidden;



    }

    .inner
    {
        background-color:silver;
        opacity:0.2px;
        position:absolute;
        top:0px;
        height:0px;
        width:200px;
        border-radius:60%;
        visibility:hidden;

    }


.text
{   
        background-color:silver;
        opacity:0.2px;
        position:absolute;
        top:0px;
        height:0px;
        width:200px;
        line-height:0px;
        visibility:hidden;
}       

    .outer:hover >.inner
    {
        #line-height:10px;
        text-align:center;
        opacity:0.2px;
        height:200px;
        width:200px;

        transition:height 2s;
        transition-timing-function: ease-in;
        visibility:visible;

    }


.inner:hover > .text
{

        line-height:200px;
        text-align:center;
        opacity:0.2px;
        height:200px;
        width:200px;
        #background-color:blue;

        transition:line-height 2s;
        transition-timing-function: ease-in;
        visibility:visible;


}



    </style>

Answer 1

用这个css替换你的CSS：

body
{
    background-color:black;
}

.outer
{
    background-color:green;
    position:absolute;
    top:50px;
    height:200px;
    width:200px;
    border-radius:50%;
    border:10px solid white;
    overflow:hidden;
}

.inner
{
    background-color:silver;
    opacity:0.2px;
    position:absolute;
    top:0px;
    height:0px;
    width:200px;
    border-radius:60%;
    visibility:hidden;

}

.text
{
    opacity:0.2px;
    position:absolute;
    top:0px;
    height:0px;
    width:200px;
    line-height:0px;
    visibility:hidden;
}

.outer:hover > .inner
{
    line-height:10px;
    text-align:center;
    opacity:0.2px;
    height:200px;
    width:200px;

    transition:height 2s;
    transition-timing-function: ease-in;
    visibility:visible;

}

.outer:hover > .inner .text
{
    line-height:200px;
    text-align:center;
    opacity:0.2px;
    height:200px;
    width:200px;
    transition:line-height 2s;
    transition-timing-function: ease-in;
    visibility:visible;
}

问题是悬停。两个徘徊被添加。外悬停和内悬停。当内部悬停被触发时，文字即将到来。

内部悬停更改为

.outer：hover＆gt; .inner .text

现在两者都会同时降下来。

如何同时对父/子DIV执行相同的转换

1 个答案: