在 JQUERY .hover 中转换 CSS { ul li:hover a }

Question

我现在想知道是否有一种方法可以在 jquery .hover 中转换此 css 属性，或者通过 javascript 控制它以动态更改颜色。

CSS：

ul li:hover a {
    color: #FFF;
}

有人可以帮忙吗？

编辑：

我的问题是：

我有一个下拉菜单，我希望当我将鼠标悬停在菜单上时，文本颜色会发生变化，当我将鼠标悬停在子菜单上时，两者的悬停状态都会保持不变。

JQuery：

$("ul li").hover(function () {          
    $(this).stop().animate({ backgroundColor: "white"}, 500);
}, function () {
    $(this).stop().animate({ backgroundColor: "black"}, 400);
});

在菜单和子菜单中悬停时设置背景颜色动画。

例如，如果文本是黑色的，我想在悬停时将文本设置为白色。为此，我使用：（子菜单示例，当然，对于菜单更改选择器）

$('ul.submenu li a').hover(function () {        
    $(this).css({color:'#FFFFFF'});
}, function () {            
    $(this).css({color:'#00FF00'});
});

所有这些工作正常，但是当我悬停子菜单时，菜单返回到原始状态（因为 mouseleave 在悬停时被激活）。我想要的是，当我悬停子菜单时，菜单中的悬停状态也保持活动状态。

我尝试了很多方法，但都给我带来了问题，唯一有效的是 css，但我也需要动态控制文本颜色。

HTML 结构：

<ul class="menu">

      <li><a href="#">text</a></li>

      <li><a href="#">text</a>

        <ul class="submenu">
          <li><a href="#">text</a></li>
          <li><a href="#">text</a></li>
          <li><a href="#">text</a></li>
        </ul>

      </li>

      <li><a href="#">text</a></li>

</ul>

Answer 1

请告诉我这是否符合您的要求。

我还没有完全正常工作，但看看它是否有帮助：
我的 JSFiddle

这是到目前为止的代码：

   $(document).ready(function() {
       var sm;                       // submenu
       var delay = 500;              // delay before applying changes
       var tID;                      // timeout id
       var color_on  = '#fff'
         , color_off = '#000';
       var oPrev;


       $('ul.menu > li > a').hover(
          function() {
             if (tID && $(this) === oPrev) {clearTimeout(tID);}
             oPrev = $(this);
             sm  = $(this).next('.submenu');
             if(sm){sm.stop(true, true).fadeIn('slow');}
          },
          function() {
             if (tID) {clearTimeout(tID);}
             tID = setTimeout(
                      function() {
                         sm.stop(true, true).fadeOut('slow');
                      }, delay);
          }
       );

       $('.submenu > li > a').hover(
           function() {
              if (tID) {clearTimeout(tID);}
              oPrev.css('color',color_on);
              $(this).stop(true, true).fadeIn('slow');
           },
           function() {
              if (tID) {clearTimeout(tID);}
              sm  = $(this);
              tID = setTimeout(
                       function() {
                          oPrev.css('color','');
                          sm.closest('ul').stop(true, true).fadeOut('slow');
                       }, delay);
           }
       );
   });

和 CSS：

   a
   {
       color           : #000;
       text-decoration : none;
   }
   a:hover
   {
       color           : #fff;
   }

   ul li
   {
       background      : orange;
       border          : 1px solid black;
       display         : inline-block;
       padding         : 0 1em;
       vertical-align  : top;  
   }

   .menu
   {
       background      : #ccc;
       border          : 1px solid black;
       display         : inline-block;
       padding         : .25em 1em;
       vertical-align  : top;
   }
   .submenu
   {
       border          : 1px solid black;
       border-width    : 1px 0 0 0;
       display         : none;
   }
   .submenu li
   {  
       background      : red;
       border-width    : 0;
   }
   .submenu li a:hover
   {
       color           : #fff;
   }

---

注意：我并不是说这是最好的答案，也不是一个完整的解决方案，但也许这里的某些内容可以帮助某人找到正确的解决方案。

Answer 2

$("ul li a").hover(function() {
    $(this)
        .data("color", $(this).css("color"))
        .css("color", "#FFF");
}, function() {
    $(this).css("color", $(this).data("color"));
});

$("ul li").hover(function() {
    $(this).find("a")
        .data("color", $(this).css("color"))
        .css("color", "#FFF");
}, function() {
    $(this).find("a").css("color", $(this).data("color"));
});

---

更新：

假设第一个选择器（ul li a:hover）是多余的，我们可以大大简化代码：

$("li").hover(function() {
    $(this).find("a").css("color", "#FFF");
}, function() {
    $(this).find("a").removeAttr("style");
});

这个更新的代码也应该可以工作（在您ANCHOR 元素的 style 属性内没有额外的 CSS 代码）。

---

更新：

替代解决方案如下：

$("li").hover(function() {
    $(this).toggleClass("hover", $(this).is(":hover"));
});

使用此 CSS 代码：

ul li.hover a {
    color: #FFF;
} 

我强烈推荐此替代解决方案！

Answer 3

$('li').hover(
    function(){
         $(this).css({color:'white'}); //mouseover
    },
    function(){
         $(this).css({color:'black'}); // mouseout
    }
);

Answer 4

试试这个（现已测试：http://jsfiddle.net/nathan/J7HLV/）：

$('ul li a, ul li').hover(function () {
  $(this).add($(this).children('a')).filter('a').css('color','#fff');
},function () {
  $(this).add($(this).children('a')).filter('a').css('color','');
});

Answer 5

当然，只需使用悬停绑定即可。

$("ul li a").bind("hover", function () {
    $(this).css("color", "#FFF");
});
$("ul li").bind("hover", function () {
    $(this).children("a").css("color", "#FFF");
});

请注意，当您将鼠标移开时，此代码不会重置 CSS 属性。为此，您需要存储原始颜色值。

将 a 元素设置为 display: block 可能是值得的，以便它扩展到整个父 li 元素。然后您只需将鼠标悬停在其中之一上即可。

Answer 6

为li标签绑定hover函数。每当 mouseover/mouseout 位于 标记上时，事件就会冒泡到

$(function(){   
    $("ul li").hover(function(){
        $(this).css("color", "#fff");
    },function(){
        $(this).css("color", "#000000");
    });
});

请参阅 工作演示

如果您可以使用 CSS 实现效果，那么为什么还要使用 javascript 解决方案。