javascript - 如何将悬停图像与 twitter bootstrap 下拉菜单一起使用

Question

使用推特 Bootstrap 。在该站点上，我有一个顶部导航栏，其中包含一些链接，其中一些具有 dd 菜单，而另一些只是静态链接。

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

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

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

  <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>
....

为了让悬停起作用，我首先创建了一个大的 sprite 图像，其中包含每个正常/突出显示的图像。

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

#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 分配给 anchor 本身...

<a id="hifiMenuLink" ...

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

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