1

使用推特引导程序。在该站点上，我有一个顶部导航栏，其中包含一些具有 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 的导航栏控件的最佳做法是什么。有没有人尝试过这样的事情？

提前致谢。

4

1 回答 1

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

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

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

于 2012-04-26T14:25:24.943 回答