Question

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

我有一个二级导航栏。占位符是表格单元格（我知道不好 - 但它已经这样做了）。我想将背景从白色（#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");
          }
               );

Answer 1

将上下文参数添加到$（）函数。

$(".subLink") - ＆gt; $(".subLink", this)将使jQuery仅匹配给定上下文元素的子节点“.subLink”。

Answer 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”规则。

Answer 3

我和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;
          }

这可能还需要一分钟，因为我不得不让它看起来很漂亮。

我不是想成为一个欺负者，也不会贬低你，但非语义代码不是应该鼓励的东西，如果你正在寻找某些东西的帮助，我不会觉得它是正确的它将被用于不合规的网站。

Answer 4

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

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

Answer 5

AKX的解决方案是正确的。或者，你可以这样做：

$(this).children(".subLink")

如何阻止jQuery匹配多个元素

5 个答案: