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/