html - Mouse over and off XHTML/HTML5

Question

I am looking at creating a simple animation in where if you move the mouse open the button opens and you see a word, if you move off of it, the button closes.

What I want though is a reverse order of it opening, so when the mouse moves from the button it slowly closes instead of snapping shut, just like how it opened.

Is there a way to make this possible using only XHTML or 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 像素的按钮，并且在悬停时（当您将鼠标悬停在上方时）它会变大并显示文本。