Question

在我的应用程序中，我正在尝试使用类似于Wordpress管理菜单的管理菜单，但是，我正在努力的效果是在菜单项的鼠标悬停时显示图标高亮显示和向下箭头显示。 / p>

我的菜单目前看起来或多或少如下所示：

 <ul id="sideMenu">
    <li class="sideMenuItem">
       <div class="menu-icon-dashboard menu-image"></div>
       <%: Html.ActionLink("Dashboard", "Index", "Home")%>
    </li>
 </ul>

我的CSS目前也很简单：

#sideMenu 
{
    clear: left;
    float: left;
    list-style: none outside none;
    margin: 15px 15px 15px 0px;
    padding: 0;
    position: relative;
    width: 145px;
}
.sideMenuItem
{
    background: url('images/menu-bits.gif') repeat-x scroll left -379px #F1F1F1;
    color: #000000;
    padding: 5px;
    border: 1px solid #bbbbbb;
}
#sideMenu .menu-icon-dashboard {
    background: url('images/menu.png') no-repeat scroll -65px -33px transparent;
}
#sideMenu div.menu-image {
    float: left;
    height: 28px;
    width: 28px;
    margin-top: -5px;
}

更改菜单项右侧的菜单图标以及鼠标悬停在菜单项左侧显示向下箭头的最佳方法是什么？

Answer 1

Wordpress使用精灵作为每个导航项的背景图像。当用户将鼠标悬停在菜单上时，css会调用hover伪选择器来移动背景图像的位置以显示突出显示的图像。

#div { width: 50px; height: 50px; background: url(/path/to/image/) no-repeat 0 0; }
#div:hover { background-position: 0px -50px; }

显示的示例需要100px高的图像 - 正常状态将显示图像的上半部分50px，当悬停发生时，div将显示图像的底部50px。

在css-tricks.com

了解有关css sprites的更多信息

构建一个像Wordpress'管理菜单一样的菜单

1 个答案: