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

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

我想让悬停元素的直接 sibling 拥有 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>