Question

https://codepen.io/Sprudeldude/pen/aNKmMb

＆＃13;

.verborgen{
    visibility: hidden;
}

.wrap
{
    color: black;
    width:200px;
    height: 20px;

    transition: height 1s, width 1s;
    -moz-transition: height 1s, width 1s; /* Firefox 4 */
    -webkit-transition: height 1s, width 1s; /* Safari and Chrome */
    -o-transition: height 1s, width 1s; /* Opera */
    -ms-transition: height 1s, width 1s; /* IE9 (maybe) */

}

.wrap:hover .verborgen
{
    visibility: visible;
    background: #999;
    height:200px;
    width: 500px;

}

＆＃13;

<div class="wrap">
                <h2>Medewerkers</h2>
                          <div class="verborgen">
                            <div>Persoon 1</div>
                            <div>Persoon 2</div>
                            <div>Persoon 3</div>
                    </div>

＆＃13;

当我将鼠标悬停在＆＃34; Medewerkers＆＃34;时，它会在方框中显示一个方框：Persoon 1，Persoon 2和Persoon 3。

这部分代码有效，但过渡和悬停效果不再起作用。

有人可以帮助我吗？

Answer 1

你有两个问题：

您无法动画（转换）任何变化的内容 visibility: hidden至visibility: visibile或display: none至非none的内容。
转换元素是.verborgen，而不是.wrap，所以过渡应适用于它。

＆＃13;

.verborgen{
  width: 0;
  height: 0;
  overflow: hidden;
  background: #999;
    -moz-transition: height 1s, width 1s; /* Firefox 4 */
    -webkit-transition: height 1s, width 1s; /* Safari and Chrome */
    -o-transition: height 1s, width 1s; /* Opera */
    -ms-transition: height 1s, width 1s; /* IE9 (maybe) */
    transition: height 1s, width 1s;
}

.wrap
{
    color: black;
    width:200px;
    height: 20px;

    transition: height 1s, width 1s;
}

.wrap:hover .verborgen
{
    height:200px;
    width: 500px;

}

＆＃13;

<div class="wrap">
                <h2>Medewerkers</h2>
                          <div class="verborgen">
                            <div>Persoon 1</div>
                            <div>Persoon 2</div>
                            <div>Persoon 3</div>
                    </div>

＆＃13;

无法显示带过渡的文字

1 个答案: