Convert CSS {ul li: hover a} to JQUERY.hover

Question

I want now if there is a way to convert these css properties to jquery.hover or manage it with javascript to dynamically change color.

CSS

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

Can anyone help?

EDIT:

My problem:

I have a dropdown menu, and I want that when I hover over a menu to change the color of the text, and when I hover over a submenu, the hang state remains for both.

JQuery

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

Animate the background color when hovering over menus and submenus.

For example, if the text is black, I want the text to be white on hover. For this, I use: (example submenu, to select the selector menu, of course)

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

All This works fine, but when I find a submenu, the menu returns to its original state (because the mouse is activated upon output). All I want is that when I find a submenu, the hang state in the menu also remains active.

I tried a lot of things, but everyone brings me problems, only the work that works is css, but I also need to dynamically control the colors of the text.

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> 

Answer 1

Please let me know if this is what you ask for.

I have no work completely, but look at this and see if this helps: my JSFiddle

Here is the code:

  $(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 am not saying that this is the best answer and is not a complete solution, but maybe something here will help someone find the right solution.

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

---

Update:

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

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

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

---

Update:

An alternative solution would be the following:

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

Answer 3

Try this (now verified: 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

Of course, just use hover binding.

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

Please note that this code will not reset CSS properties on mouse output. To do this, you will need to keep the original color values.

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

Answer 5

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

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

See working demo

If you can achieve the effect using CSS, then why look for a solution for javascript.

Answer 6

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