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

我有一个复杂的问题。

这里有两个元素：

（1）。 选择$(".steps li")我希望整个<li>将颜色更改为rgb(66, 81, 95) 。 然后它必须回到以前的状态。

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

第二部分是棘手的部分：

（2）。 当在同一个<li>选择<a> ，我希望颜色保持不变，并且要应用下划线。 因此，我希望“世界大会”文本保持绿色，加下划线，并让<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'));
     });

---

只需在<a>悬停时在父母<li>上切换一个班级即可。

然后，一套新的规则可以涵盖李和基于类的颜色

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

.steps li.aHovered{
  color : white
}

.steps li.aHovered a{
  color : green
}

---

这里有几个解决你的问题（我使用了一些十六进制值，因为RGB通常不用于网络）。

解决方案1：添加/删除悬停上的类 ：JSFiddle

jQuery的：

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

CSS：

.color {
    color: #e7e7e7 !important;
}

解决方案2a：改变你的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;
}

解决方案2b：再次改变你的jQuery ：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;
}

链接地址: http://www.djcxy.com/p/24491.html

上一篇: Modifying An Element Already Activated By Another Selector

下一篇: Can an anonymous class implement the non abstract method of the abstract class?