0

シンプルなドロップダウンアニメーションを作ろうとしています。他のボタンを押し下げて、簡単なテキストを表示したい。私はそれを機能させましたが、少しジャズアップするためだけにWebkitトゥイーンが欲しかったのですが、機能させることができないようです. アウトラインのようにレイアウトしているので、絶対配置は使用したくありません。

HTMLのサンプルはこちら

<div id="ngss-main" class="post">
            <div class="infoblock">
                <a class="topic">Forces and Interactions
                    <div class="inform">
                        <h5>What happens if you push or pull an object harder?</h5>
                        <ul>
                            <li>Pushes and pulls have different strengths and directions</li>
                            <li>Pushes and pulls start, stop, change speed or direction of an object*</li>
                        <ul>
                    </div>
                </a>
            </div>
            <br>
            <div class="infoblock">
                <a class="topic">Interdependent Relationships in Ecosystems
                    <div class="inform">
                        <h5>Where do animals live and why do they live there?</h5>
                        <ul>
                            <li>Animals need food, plants need water and light to live and grow</li>
                            <li>Living things need water, air, and resources from their environment</li>
                            <li>Plants and animals can change their environment</li>
                        <ul>
                    </div>
                </a>
            </div>
        </div>

ここが重要な部分です。CSS

.inform {
margin: 5px;
display: none;
color: black;
font-family: 'Helvetica', sans-serif;
border:10px solid rgb(114, 145, 63);
background-color: rgb(247, 145, 60);
position: relative;
width: 500px;
top: -200px;
-webkit-animation: slide 0.5s linear;
-moz-animation: slide 0.5s linear;
-0-animation: slide 0.5s linear;
animation: slide 0.5s linear;
-webkit-animation-delay: 2s;
-moz-animation-delay: 2s;
-o-animation-delay: 2s;
animation-delay: 2s;
}

.inform h5 {
font-style: italic;
font-style: bold;
font-size: 18px;
}

.topic {
font-family: 'Helvetica', sans-serif;
font-style: bold;
font-size: 24px;
color: rgb(53, 78, 155);
}

.topic li{
color: black;
font-style: normal;
font-size: 16px;
}

a:hover .inform  {
display: block;
-webkit-transition:all 1.0s ease-in-out;
-moz-transition:all 1.0s ease-in-out;
-o-transition:all 1.0s ease-in-out;
transition:all 1.0s ease-in-out;
}

@-webkit-keyframes slide {
0% {top, 0px;}
100% {top, 200px;}
}
@-moz-keyframes slide {
0% {top, 0px;}
100% {top, 200px;}
}
@-o-keyframes slide {
0% {top, 0px;}
100% {top, 200px;}
}
@keyframes slide {
0% {top, 0px;}
100% {top, 200px;}
}

私が見逃しているのはばかげていることを知っています。どんな助けでも大歓迎です。

4

2 に答える 2

0

あなたは今までにそれを理解したかもしれませんが、とにかく...疑似:hoverを追加しようとしましたか? そうでない場合は、高さの値を設定してください。カーソルを合わせると、コンテナが引き伸ばされ、追加のものが表示されます。オーバーフローをいじる必要があるかもしれません。

于 2013-08-18T23:42:24.440 に答える