Question

使用twitter bootstrap。在网站上我有一个顶部导航栏包含链接，其中一些有dd菜单，有些只是静态链接。

我正在使用img而不是文本锚来构建链接。

我希望将悬停效果应用于导航栏中的每个链接。这可以通过交换图像或在精灵中加载不同的背景位置来完成。

我正在使用常规方式指定导航栏，

  <ul class="nav nav-pills">
         <li class="dropdown" id="hifiMenu">
               <a class="dropdown-toggle" data-toggle="dropdown" href="#hifiMenu"><img src="$PRE/images/newhifi.png"></a>
         <ul class="dropdown-menu">
               <li class="mainitem"><a href="$PRE/newhifi">BY BRAND</a></li>

是否可以将鼠标悬停在#hifiMenu的A链接上，并且当下拉列表被激活时，将图像换出？

不太确定使用TB导航栏控件的最佳做法是什么。有人试过这样的事吗？

提前感谢。

Answer 1

如我的问题所述，我有以下导航栏项目：

<ul class="nav nav-pills">
     <li class="dropdown" id="hifiMenu">
           <a class="dropdown-toggle" data-toggle="dropdown" href="#hifiMenu"><img src="newhifi.png"></a>
     <ul class="dropdown-menu">
           <li class="mainitem"><a href="newhifi">BY BRAND</a></li>
....

为了让悬停工作，我首先创建了一个包含每个普通/高亮图像的大精灵图像。

然后我为每个链接设置了一个新样式：

#hifiMenuLink {
    width:71px;
    height: 11px;
    background-image: url(path_to_sprite);
    background-repeat: no-repeat;
    background-position: 0px -6px;
}

然后是悬停：

#hifiMenuLink:hover {
    width:71px;
    height: 11px;
    background-image: url(path_to_sprite);
    background-repeat: no-repeat;
    background-position: 0px -37px;
}

然后我将ID，hifiMenuLink分配给锚本身......

<a id="hifiMenuLink" ...

这是我快速而肮脏的解决方案。

希望将来可以帮助其他人。

如何使用Twitter引导下拉菜单使用悬停图像

1 个答案: