如何从悬停的列表元素中设置下一个相邻，上一个相邻和其他列表元素的样式

Question

我正在尝试使列表元素的不透明度从元素中更改徘徊我的 HTML 标记是

            <ul class="list-unstyled">
            <li>
                Lorem ipsum dolor sit amet
            </li>
            <li>
                Consectetur adipiscing elit
            </li>
            <li>
                Integer molestie lorem at massa
            </li>
            <li>
                Facilisis in pretium nisl aliquet
            </li>
            <li>
                Nulla volutpat aliquam velit
            </li>
            <li>
                Faucibus porta lacus fringilla vel
            </li>
            <li>
                Aenean sit amet erat nunc
            </li>
            <li>
                Eget porttitor lorem
            </li>
        </ul>

我在哪里使用此 css

.list-unstyled li:first-of-type {
  opacity:1;
}
.list-unstyled li:nth-of-type(2){
  opacity:0.60;
}
.list-unstyled li:nth-of-type(3){
 opacity:0.35;
}
.list-unstyled li {
  opacity:0.35;
}
.list-unstyled li:hover {
  opacity:1 !important;
}
.list-unstyled li:hover ~ li {
 opacity:0.65 !important;
}
.list-unstyled li:hover ~ li ~li {
 opacity:0.35 !important;
}

我想使悬停元素直接同级具有 35% 的不透明度层其余的应该有 65% 的不透明度层。

而在初始阶段，我希望第一个 li 元素的不透明度层为 1，当它被取消悬停时，它应该随着其他元素的悬停而更改为相应的样式 我怎样才能实现这一点。

Answer 1

CSS没有以前的同级选择器，因此仅使用CSS无法实现您想要实现的目标。

如果你对 JavaScript 解决方案持开放态度，你可以这样做：

var	items=document.getElementsByTagName("li"),
    hovered=items[0],
    x=items.length,
    previous;
hovered.classList.add("hovered");
while(x--)
    items[x].addEventListener("mouseover",function(){
        hovered.classList.remove("hovered");
        if(previous)
            previous.classList.remove("previous");
        hovered=this;
        previous=this.previousSibling;
        hovered.classList.add("hovered");
        if(previous)
            previous.classList.add("previous");
    },0);

ul{list-style:none;margin:0;padding:0;}
li{width:100px;height:100px;background:red;display:inline-block;}
li{
  opacity:0.35;
  transition:opacity .25s;
}
.hovered{
  opacity:1;
}
.previous,.hovered+li{
  opacity:.65;
}

<ul><li></li><li></li><li></li><li></li><li></li></ul>

Answer 2

+和~选择器可以选择下一个相邻元素和其他元素，但不幸的是，没有CSS可以选择CSS中的先前元素

检查这个 是否有"前兄弟姐妹"CSS 选择器？

Answer 3

你只需要再添加一个CSS代码

.list-unstyled:hover li:first-of-type {
  opacity:.35;
 }

这是您问题的工作演示

Answer 4

如果是直系同级，则可以使用 + 选择器。然后，任何不是直系兄弟姐妹的兄弟姐妹都可以使用 ~ 选择器

.list-unstyled li:hover + li {
  opacity:0.35;
}
.list-unstyled li:hover ~ li {
  opacity:0.65;
}