html - XHTML/HTML5 にマウスを重ねて離す

Question

マウスを動かすとボタンが開き、単語が表示され、そこから離れるとボタンが閉じる簡単なアニメーションの作成を検討しています。

私が望んでいるのは、開く順序が逆であるため、マウスがボタンから移動すると、開いたときと同じように、スナップするのではなく、ゆっくりと閉じます。

XHTML または HTML5 のみを使用してこれを可能にする方法はありますか?

Answer 1

私があなたの要求を正しく理解していれば、これはあなたが望むものです:

<div id="button">
    <span>This is your Text</span>

</div>

<style>
    #button{
        height: 20px;
        width: 100px;
        background-color: blue;
        color: white;
        transition: height 0.25s linear 0.25s;
    }

    #button span{
        opacity: 0;
        transition: opacity 0.1s linear;
    }

    #button:hover{
        height: 50px;
        transition: height 0.25s linear;
    }

    #button:hover span{
        opacity: 1;
        transition: opacity 0.1s linear 0.25s;
    }
</style>

このスニペットは 100x20 ピクセルのボタンを作成し、ホバーすると (マウスを上に移動すると)、ボタンが大きくなり、テキストが表示されます。