将鼠标悬停在<li> </li>上时显示Jquery

Question

我有以下结构：

<div class="calendar">
    <ul>
        <li>
            lots of content 
        </li>
        <li>
            lots of content 
        </li>
    </ul>
</div>

当用户将鼠标悬停在每个（li）项目上时，我想显示包含多个自定义链接的菜单。这是我的意思的屏幕截图。

任何想法都会非常感激。我想我应该在类日历的（li）元素上以某种方式使用Jquery ......

Answer 1

试试这个：

<div class="calendar">
    <img src="myimage.png" alt="lots of content" />
    <ul>
        <li>
            lots of content
        </li>
        <li>
            lots of content
        </li>
    </ul>
</div>

并使用此CSS

.calendar:hover ul, .calendar img {display: block;}
.calendar:hover img, .calendar ul {display: none;}

小提琴：http://jsfiddle.net/praveenscience/J99WS/