Javascript CSS突出显示子元素-评级系统

我试图在我的div中这样做，当您将鼠标悬停在第四个图像上时，第一个3和第四个将获得css属性opacity，其值为1

我不确定我会怎么做，我读了一些关于第N个孩子的书，但这对我盘旋没有帮助。另外，如果你点击第四张图片，除了最后一张外，其他四张图片都会保持不透明度1

 <div class="rating" style="width:75px;">
    <span>
        <img class="plus" src="http://icons.iconarchive.com/icons/designcontest/casino/96/Chip-1-icon.png" width="16" height="16" />
    </span>
    <span>
        <img class="plus" src="http://icons.iconarchive.com/icons/designcontest/casino/96/Chip-1-icon.png" width="16" height="16" />\
    </span>
    <span>
        <img class="plus" src="http://icons.iconarchive.com/icons/designcontest/casino/96/Chip-1-icon.png" width="16" height="16" />
    </span>
    <span>
        <img class="plus" src="http://icons.iconarchive.com/icons/designcontest/casino/96/Chip-1-icon.png" width="16" height="16" />
    </span>
    <span>
        <img class="plus" src="http://icons.iconarchive.com/icons/designcontest/casino/96/Chip-1-icon.png" width="16" height="16" />
    </span>
</div>

---

您可以使用和的组合

---

您可以使用和的组合

---

您可以使用此jQuery功能：

// Highlight selected stars
$(document).on( "mouseenter mouseleave", 'span', function() {
    $(this).prevAll().andSelf().toggleClass('highlight');

});

当你将一个图标悬停在一个图标上时，之前的所有图标和它自身都将切换它们的类的名称

---

您可以使用此jQuery功能：

// Highlight selected stars
$(document).on( "mouseenter mouseleave", 'span', function() {
    $(this).prevAll().andSelf().toggleClass('highlight');

});

当你将一个图标悬停在一个图标上时，之前的所有图标和它自身都将切换它们的类的名称

---

这是一种纯粹的css方式：

CSS

---

这是一种纯粹的css方式：

CSS

---

---

不透明：1

表示完全不透明。这就是您想要的吗？您可以使用~向后遍历一个元素，但不能向后遍历整个同级元素。哦，我多么希望！！！是的，@Jivings在您悬停之前默认为0.5。

opacity:1

表示完全不透明。这就是您想要的吗？您可以使用~向后遍历一个元素，但不能向后遍历整个同级元素。哦，我多么希望！！！是的，@Jivings在你悬停之前默认为0.5。我知道代码在这里是如何工作的，但我把它放在了头上，它没有影响任何东西，控制台中没有错误。这将使所有带有类

加
的图像都有悬停事件，而他们似乎只希望第四个图像有悬停事件。不，我真的忘了，我觉得自己很愚蠢。虽然我现在这样做了，但它仍然不起作用：/也没有nate，这是第四个图像和前3个图像。我知道代码在这里是如何工作的，但我把它放在了头部，它没有影响任何东西，控制台中没有错误。这将使所有带有类
plus
的图像都有一个悬停事件，当他们似乎只希望第四张图片有悬停事件时。不，我实际上忘记了facepalm，我觉得自己很愚蠢。虽然我现在这样做了，但它仍然不起作用：/没有nate，这是第四幅图像，也是前3幅。未捕获类型错误：Object[Object Object]没有方法“on”未捕获类型错误：Object[Object Object]没有方法“on”嘿，它起作用了！虽然它似乎是从最后一个元素到第一个，而不是从第一个到最后一个。啊，我明白你的意思了。不，这是它应该是的方式，但是当我添加CSS时，当你选择第一个元素时，它会使它成为这样，它会高亮显示所有5个元素，当你选择最后一个元素时，它只会选择那一个。几乎是相反的。我不相信它是这个代码，我相信它是因为我的第一个跨度放在后面而不是前面。我该如何解决这个问题？我将发布我的CSS代码是的，它是rtl方向的风格，使他们走在相反的方向。我必须进一步查看代码，看看是否有css方法可以在保持rtl@user3023566好。你做了什么改变让其他人知道了？嘿，这很有效！虽然它似乎是从最后一个元素到第一个，而不是从第一个到最后一个。啊，我明白你的意思了。不，这是它应该是的方式，但是当我添加CSS时，当你选择第一个元素时，它会使它成为这样，它会高亮显示所有5个元素，当你选择最后一个元素时，它只会选择那一个。几乎是相反的。我不相信它是这个代码，我相信它是因为我的第一个跨度放在后面而不是前面。我该如何解决这个问题？我将发布我的CSS代码是的，它是rtl方向的风格，使他们走在相反的方向。我必须进一步查看代码，看看是否有css方法可以在保持rtl@user3023566好。你做了什么改变让其他人知道？
// Highlight selected stars
$(document).on( "mouseenter mouseleave", 'span', function() {
    $(this).prevAll().andSelf().toggleClass('highlight');

});

.rating span img {
    opacity:0.5;
}

.rating:hover span img {
    opacity:1;
}

.rating:hover span:hover ~ span img {
    opacity:0.5
}