0

我正在尝试使用 jQUery 创建翻转效果。我有类似的事情，但是因为我试图用一个有链接的对象进行鼠标悬停，所以我遇到了问题。

我有一个 2 级导航栏。占位符是表格单元格（我知道不好 - 但它已经这样做了）。我想将背景从白色 (#FFF) 更改为深灰色 (#999)。我还想将文本从深灰色更改为白色。

由于文本是一个链接，我必须在链接标签中指定一个类，以确保它是没有下划线的深灰色，并且不默认为带下划线的蓝色文本。

我编写的代码会导致 class="subLink" 的所有链接在其中任何一个“悬停”时从灰色变为白色。我只希望有问题的特定项目发生这种情况——即背景应该变成灰色，链接应该变成白色。

HTML 和 jQuery 如下：-

<td class="subMenuTD"><a href="newsletter.html" class="subLink">Newsletter</a></td>
<td class="subMenuTD"><a href="news_archive.html" class="subLink">News Archive</a></td>
<td class="subMenuTD"><a href="events.html">Events</a></td>

$(".subMenuTD").hover(
                  function() { 
                     $(this).addClass("subMenuTDActive");
                     $(".subLink").addClass("subLink-white");
                  },
                  function() {      
                     $(this).removeClass("subMenuTDActive");
                     $(".subLink").removeClass("subLink-white");
          }
               );
4

5 回答 5

3

将上下文参数添加到 $() 函数。

$(".subLink")-->$(".subLink", this)将使 jQuery 只匹配作为给定上下文元素的子元素的“.subLink”。

于 2009-07-23T08:42:53.060 回答
2

您可以通过不将类添加到链接来使这更加简单，因为您已经将类添加到父 td，因此可以使用 CSS 定位链接：

之前的代码

$(".subMenuTD").hover(                       
  function() {
     $(this).addClass("subMenuTDActive");                                
     $(".subLink").addClass("subLink-white");
  },
  function() {
     $(this).removeClass("subMenuTDActive");                                
     $(".subLink").removeClass("subLink-white");
  }
);

之后的代码

$(".subMenuTD").hover(                       
  function() {
     $(this).addClass("subMenuTDActive");     
  },
  function() {
     $(this).removeClass("subMenuTDActive");    
  }
);

新的 CSS 规则

.subMenuTDActive .subLink {
   /* Add hover link styling here */
}

这将起作用，因为“.subMenuTDActive .subLink”比“.subLink”具有更高的特异性，因此将覆盖“.subLink”规则。

于 2009-07-23T08:49:44.900 回答
1

我和 Drthomas 在一起。当您可以使用 css 时，您到底为什么要使用 javascript？

 .subMenuTD:hover {
                   background-color: #ccc;
                   }

 .subLink:hover {
                 color: #fff;
                 }

或者甚至更好（我认为），摆脱你不应该并且应该努力删除的 td 元素的样式，将链接设置为 display:block，然后你可以在一个元素下声明悬停样式：

 .subLink {
          display: block;
          }

  .subLink:hover {
                 background-color: #ccc;
                 color: #fff;
                 }

除非您无法控制 html，或者您有一些依赖于标记保持不变的关键任务，否则“它已经在使用表格，我知道，起诉我”是一个非常糟糕的借口。这是您的子菜单，无表：

<ul class="subMenu">
<li><a href="newsletter.html">Newsletter</a></li>
<li><a href="news_archive.html">News Archive</a></li>
<li><a href="events.html">Events</a></li>
</ul>

这花了大约 30 秒。现在这里是导航栏/翻转的 CSS：

 .subMenu li {
          display: inline;
          list-style: none;
          }

  .subMenu a {
          color: #000;
          background-color: #fff;
          text-decoration: none;
          display: block;
          }

   .subMenu a:hover {
          color: #fff;
          background-color: #ccc;
          }

那可能又花了一分钟，因为我必须让它看起来很漂亮。

我不是想成为一个欺负者或贬低你，但不应该鼓励非语义代码，如果你正在寻求帮助，如果知道它正在运行，我会觉得不对用于不合规的网站。

于 2009-07-23T09:10:35.873 回答
0

您可以使用 AKX 的解决方案，或者：

$(".subMenuTD").hover(
                    function() { 
                            $(this)
                               .addClass("subMenuTDActive")
                               .children(".subLink")
                               .addClass("subLink-white");
                    },
                    function() {            
                            $(this)
                                .removeClass("subMenuTDActive");
                                .children(".subLink")
                                .removeClass("subLink-white");
                    }
            );
于 2009-07-23T08:50:57.397 回答
0

AKX 的解决方案是正确的。或者，您可以执行以下操作：

$(this).children(".subLink")
于 2009-07-23T08:53:42.147 回答