Change an item already activated by another selector

Question

I have a slightly complicated problem.

There are two elements here:

(one). When choosing $(".steps li") I want the whole <li> change color to rgb(66, 81, 95) . Then he must return to how it was before.

This part that I have already done uses .data() .

The second part is the hard part:

(2). When choosing <a> in the same <li> , I want the color to stay the same and the underline to be applied. Therefore, I want the text of the World Assembly to remain green, underline, and the rest of the <li> be white, inactivated.

Is there a way to do this using callbacks in the hover function?

I need (1) and (2) to work at the same time.

I'm tired of hanging only on $ (". Step li a"), but this does not work, because for the first part of the work the class must be deleted.

In any case, I am not sure about that. Any advice would be appreciated.

Code below:

CSS

  html, body { background: #000; color: #e7e7e7; font-family:"Helvetica", "Arial", "Bitstream Vera Sans", "Verdana", sans-serif; margin:0; padding:0; } a { color: rgb(66, 81, 95); text-decoration:none; } a:hover { /*color:#a0a0a0;*/ text-decoration:none; } .wa a { color: rgb(68, 118, 67); } .steps { width:400px; margin:0 auto; text-align:left; line-height: 200%; } .steps a:hover { text-decoration: underline; } .steps li:hover { cursor: pointer; color: rgb(66, 81, 95); } 

JQuery

 $(".steps li").hover(function () { var the_class = $(this).children().attr("class"); $(this).data('class', the_class); console.log(the_class); $(this).children().toggleClass(the_class); }, function () { $(this).children().attr("class", $(this).data('class')); }); 

Edit: I really had to solve this with $.data() twice, because in my locally hosted code I had to add more anchor tags in the list, all with their own colors.

Now it works as follows:

  $(".steps li").hover(function () { var the_class = $(this).children().attr("class"); $(this).data('class', the_class); $(this).children().toggleClass(the_class); }, function () { $(this).children().attr("class", $(this).data('class')); }); $(".steps li a").hover(function(){ $(this).parent().parent().toggleClass('notHover'); $(this).parent().attr("class", $(this).parent().parent().data('class')); }, function() { $(this).parent().parent().toggleClass('notHover'); $(this).parent().removeClass($(this).parent().parent().data('class')); }); 

Answer 1

Just switch the class to the parent <li> when <a> hangs.

Then, a new set of rules can cover class-based colors as well.

 $(".steps li a").hover(function){ $(this).parent().toggleClass('aHovered'); }); .steps li.aHovered{ color : white } .steps li.aHovered a{ color : green } 

Answer 2

Here are some solutions to your problem (I used some hexadecimal values ​​because RGB is not commonly used for the Internet).

Solution 1: Add / remove class on hover : JSFiddle

JQuery

 $(".steps li a").hover(function() { $(this).parent().toggleClass("color"); }); 

CSS

 .color { color: #e7e7e7 !important; } 

Solution 2a: change jQuery : JSFiddle

JQuery

 $(".steps li a").hover(function() { $(this).parent().css("color", "#e7e7e7"); }); $(".steps li a, .steps li").mouseleave(function() { $(this).parent().css("color", ""); }); 

CSS

 .steps li:hover, .steps li:hover a { cursor: pointer; color: rgb(66, 81, 95); } .steps li a:hover { color: #447643; } 

Solution 2b: change your jQuery again : JSFiddle

JQuery

 $(".steps li a").hover(function() { $(this).parent().attr("style", "color: #e7e7e7"); }, function() { $(this).parent().attr("style", ""); }); 

CSS

 .steps li:hover, .steps li:hover a { cursor: pointer; color: rgb(66, 81, 95); } .steps li a:hover { color: #447643; }