修改已被另一个选择器激活的元素

Question

我有一个复杂的问题.

这里有两个要素:

(1).选择时$(".steps li")我希望整体<li>改变颜色rgb(66, 81, 95).然后它必须改回原来的状态.

这部分我已经完成了,使用.data().

第二部分是棘手的部分:

(2).当我选择一个<a>相同<li>的颜色时,我希望颜色保持不变并使用下划线.因此,我希望"世界大会"文本保持绿色,加下划线,其余部分为<li>白色,灭活颜色.

有没有办法在悬停功能中使用回调来做到这一点？

我需要(1)和(2)同时工作.

我只是徘徊在$(".steps li a")上,但这不起作用,因为第一部分工作,必须删除该类.

无论如何,我不确定这一点.任何意见,将不胜感激.

代码如下:

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

编辑:我实际上必须使用$.data()两次解决这个问题,因为在我的本地托管代码中,我最终必须在列表中添加更多锚标记,所有锚标记都有自己的颜色.

它现在的工作方式如下:

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

只需在悬停<li>时切换父类上的类即可。<a>

然后一组新的规则可以根据类覆盖 li 和 a 颜色

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

.steps li.aHovered{
  color : white
}

.steps li.aHovered a{
  color : green
}