JSFiddle - React, Tailwind, and code Playground

by Michael Tsai

HTML

滑鼠經過時滑出內容。
<div id="bookBlock">
    <div id="bookImg">
        <img src="https://dl.dropboxusercontent.com/u/12063392/Images/MyBooks.jpg" border="0" width="30%" height="30%" />
    </div>
    <div id="bookContent" style="display: none;">
        <ul class="nav" id="nav4">
            <li>ASP.NET MVC 5 實戰</li>
            <li>Entity Framework 實戰</li>
            <li>軟體構築美學</li>
            <li>物件導向分析與設計</li>
        </ul>
    </div>
</div>
滑鼠移出時隱藏內容。（在 jsFiddle 沒作用，但使用實際的網頁來測試是 OK 的）

JavaScript

$(function () {
    $("#bookContent").hide();

    $("#bookBlock").hover(
        function () {
            $("#bookContent").toggle("slide", { direction: 'up' }, 500);
        },
        function () {
            $("#bookContent").toggle("slide", { direction: 'up' }, 500);
        }
    );
});