Question

我试图在我的div中做到这一点，当你将鼠标悬停在第4张图像上时，第3张和第4张将获得css属性的不透明度，并将其值设置为1。

我不确定我将如何做到这一点，我读了一些关于n-child的内容，但这并没有帮助我徘徊。此外，如果您单击第4张图像，则可以使除最后一张图像之外的所有4图像保持不透明度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>

如果您不理解并需要我更清楚地说出来，或者您需要更多信息，请告诉我们！

CSS：

.rating span img {
    opacity:0.5;
}

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

.rating:hover span:hover ~ span img {
    opacity:0.5
}
.rating {
  unicode-bidi: bidi-override;
  direction: rtl;
}
.plus {
    opacity:0.5;
}
.plus:hover {
    opacity:1;
}
.rating > span {
  display: inline-block;
  position: relative;
  width: 1.1em;
  padding:1px;
}
.rating > span:hover:before,
.rating > span:hover ~ span:before {
   position: absolute;
}

Answer 1

您可以使用.index()和:lt()

的组合

$(document).ready(function () {
    $('img.plus').hover(function () {
        $('img.plus:lt(' + $(this).index() + ')').css('opacity', 1);
    });
});

DEMO

DEMO with current element also

Answer 2

纯粹的css方式：

CSS

.rating span img {
    opacity:0.5;
}

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

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

JSFiddle

Answer 3

你可以使用这个jQuery函数：

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

});

当您将所有图标悬停在图标之前并将其自身切换时，将切换其类“

Example

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

3 个答案: