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'});
});

全部这样可以正常工作，但是当我将鼠标菜单悬停时，菜单会返回到原始状态（因为鼠标悬停在鼠标悬停时被激活）。我想要的是，当我悬停子菜单时，菜单中的悬停状态也会保持活动状态。

我尝试了很多东西，但都给了我一些问题，只有有效的东西是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

$("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 2

如果这是您正在询问的问题，请告诉我。

我还没有完全正常工作，但请看看它是否有帮助： my 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 3

试试这个（现已测试：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 4

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

$("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 5

绑定li标签的悬停功能。只要鼠标悬停/鼠标移动位于<a>标记上，该事件就会冒泡到<li>

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

查看working demo

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

Answer 6

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

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

6 个答案: