Transform CSS { ul li:hover a } in JQUERY .hover

I want to now if there's a way to transform this css properties in a jquery .hover, or control this by javascript to change the colour dynamically.

CSS:

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

Can anyone Help ?

EDIT:

My problem is:

I have a drop down menu and i want that when I hover the menu the text color change and when I hover the submenu the hover state stays for both.

JQuery:

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

To animate background color on hover in menu and submenu.

For example if the text are black I want to make the text white on hover. For this I use:(Submenu example, for menu change the selector of course)

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

All This works fine, but when I hover the submenu the menu returns to the original state(because the mouseleave is activated on hover out). All I want is that when I hover submenu the hover state in menu stays active as well.

I've tried many things but all give me problems, only thing that works is css, bu开发者_StackOverflowt I need to control the text colours dynamically too.

HTML Structure:

<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>

Please let me know if this is along the right track of what you're asking.

I haven't got it working fully, but give this a look and see if it helps: my JSFiddle

Here's the code so far:

   $(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);
           }
       );
   });

And 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;
   }

Note: I'm not saying this is the best answer, nor is it a complete solution, but maybe something in here will assist someone in finding the correct solution.

$("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"));
});

Update:

Assuming that the first selector (ul li a:hover) is superfluous, we can simplify the code considerably:

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

This updated code should work also (under the condition that you don't have additional CSS code inside the style attribute of the ANCHOR elements).

Update:

An alternative solution would be this:

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

with this CSS code:

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

I highly recommend this alternative solution!

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

Try this (now tested: 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','');
});

Sure, simply use the hover binding.

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

Note that this code won't reset the CSS properties when you mouse out. To do that you would need to store the original color values.

It is probably worth it to set that a element to display: block so it expands to the entire parent li element. Then you only need to hover on one of them.

Bind a hover function for the li tag. Whenever mouseover/mouseout is on the <a> tag the event will bubble up to the <li>

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

See a working demo

If you can achieve the effect using CSS then why go for javascript solution.