如何在 twitter 引导下拉菜单中使用悬停图像

Posted 2023-05-08

【中文标题】如何在 twitter 引导下拉菜单中使用悬停图像

【英文标题】：how to use hover images with twitter bootstrap dropdown menus

【发布时间】：2012-05-03 23:32:30

【问题描述】：

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

提前致谢。

【问题讨论】：

为什么不在 span 标签内使用背景图片呢？在悬停时替换 img 图像听起来像是很多工作，可以使用背景图像轻松完成。

@Andres 谢谢！是的，我认为这会很好。我最终通过为每个锚分配一个 ID 并为每个 #linkID 和 #linkID:hover 设置背景来使其工作。我还使用spriteme.com 来帮助创建主精灵图像。

Dan，你能以答案的形式发布你的结果并批准吗？这样，它也可以帮助未来的用户解决同样的问题。

【参考方案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" ...

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

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