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

Modifying An Element Already Activated By Another Selector

我的问题有点复杂。

这里有两个元素:

(1). 选择 $(".steps li") 时,我希望整个 <li> 的颜色变为 rgb(66, 81, 95)。然后又得变回原来的样子

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

第二部分比较棘手:

(2). 在完全相同的 <li> 中选择 <a> 时,我希望颜色保持不变并应用下划线.所以我希望 "World Assembly" 文本保持绿色,加下划线,并让 <li> 的其余部分为白色、未激活的颜色。

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

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

我厌倦了将鼠标悬停在 $(".steps li a") 上,但这不起作用,因为要使第一部分起作用,必须删除 class。

不管怎样,我不确定这一点。任何意见,将不胜感激。

代码如下:

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

这里有几个解决您问题的方法(我使用了一些十六进制值,因为 RGB 通常不用于网络)。

解决方案 1:Add/Remove悬停 classJSFiddle

jQuery:

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

CSS:

.color {
    color: #e7e7e7 !important;
}

解决方案 2a:改变您的 jQueryJSFiddle

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

解决方案 2b:再次更改您的 jQueryJSFiddle

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

悬停 <a> 时,只需在父 <li> 上切换 class。

然后一套新的规则可以根据class

覆盖li和a颜色
$(".steps li a").hover(function){
     $(this).parent().toggleClass('aHovered');
});

.steps li.aHovered{
  color : white
}

.steps li.aHovered a{
  color : green
}