Modifying An Element Already Activated By Another Selector

Question

I have a bit of a complicated problem.

There are two elements here:

(1). When selecting the $(".steps li") I want the whole <li> to change color to rgb(66, 81, 95). Then it has to change back to how it was before.

This part I have accomplished already, using .data().

The second part is the tricky part:

(2). When selecting an <a> in the very same <li> I want the color to stay the same and the underline to be applied. So I want the "World Assembly" text to stay green, be underlined, and have the rest of the <li> be the white, inactivated color.

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 tired to hover on just the $(".steps li a") but that doesn't work because for the first part to work, the class has to be removed.

Anyway, I am unsure about this. Any advice would be appreciated.

Code is 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 actually had to solve this using $.data() twice, because in my locally hosted code I ended up having to add more anchor tags in the list, all with their own colors.

It now works like this:

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

Gig

When you 'selecting' do you mean 'hovering'? – Obsecrate

this is all very trivial just using css alone. Why do you need script to do it? – Sammer

@Sammer Actually it is not. See here: https://mcmap.net/q/1916800/-css-not-selector – Gig

is this what you want jsfiddle.net/qa76ek61/3 – Sammer

@Sammer no, see below – Gig

showing expected results would save a lot of guessing. code it iinline – Sammer

@Sammer maybe CSS 4 but I don't think in CSS 3 because I am trying to get the rest of the <li> to change back to white when the <a> is expressly hovered. – Gig

ok, then a simple toggle class on parent when <a> hover would help then. Not on <li> hover. Next time if you follow 'how to ask questions` providing an expected result will save lots of time and misunderstandings – Sammer

@Sammer It can't be done in CSS. Selectors Level 4 will add a previous ancestor selector :has(), but it won't be available in CSS, only via the DOM. So this isn't possible with just CSS unfortunately, and it won't be, unless browsers include :has() functionality w/ CSS. – Hako

Answer 1

Just toggle a class on the parent <li> when <a> is hovered.

Then a new set of rules can cover the li and a colors based on the class

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

.steps li.aHovered{
  color : white
}

.steps li.aHovered a{
  color : green
}

Sammer

this wasn't working until I added !important to the CSS class aHovered :P Thank you! – Gig

yeah may have to back out some other rules but the basics are there, or make these rules more specific – Sammer

Answer 2

Here are a couple solutions to your problem (I used some hex values, because RGB is typically not used for the web).

Solution 1: Add/Remove a class on hover: JSFiddle

jQuery:

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

CSS:

.color {
    color: #e7e7e7 !important;
}

Solution 2a: Alter your 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: Alter 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;
}

Hako

that is very close and almost acceptable at this point, the problem is in your example, when I hover over the "Word Assembly" text, the rest of the <li> changes color too. That's what I don't want, ideally speaking. – Gig

@Gig You want the non <a> link to go back to white when the <a> is hovered? – Hako

yes, if the other part of the <li> (the non <a> part) gets hovered, then change the color of the whole thing, as you have done. but if the <a> part gets selected, have the rest of the <li> revert to white – Gig

@Gig Updated my post. It should do what you ask now. You won't need the !important hack with this solution. – Hako

@Hako would need to back out the inline css on mouseleave – Sammer

@Sammer Damn, you're right. jQuery is complicated. – Hako

can use removeAttr('style') – Sammer

@Gig Updated my answer again. I would recommend you use Solution 2a or 2b, as Solution 1 (basically the same as what charlietfl provided) requires an !important CSS hack to work. – Hako

@Hako I actually had to go back and use $.data() for this because I had multiple anchor tags in the list all with different colors, so neither answer ended up working for me. Using $.data() worked though. – Gig

@Gig Ah, I see. In the future, it's best if you can include a complete reproduction of the relevant code for your problem. :-) Glad you got it working! – Hako