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中的前一个元素

选中此Is there a "previous sibling" CSS selector?

Answer 3

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

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

以下是您的问题的工作demo

Answer 4

如果它是直接兄弟，您可以使用tiedlist选择器。那么任何不是直接兄弟姐妹的兄弟都可以使用ERROR [+3219] HVite: HMM list file name expected FATAL ERROR - Terminating program HVite选择器

   sysLogMessageSeverity OBJECT-TYPE
       SYNTAX  INTEGER {
           emergency (0),          --system is unusable
           alert (1),              --action must be taken immediately
           critical (2),           --critical conditions
           error (3),              --error conditions
           warning (4),            --warning conditions
           notice (5),             --normal but significant condition
           informational (6),      --informational messages
           debug (7)               --debug-level messages

       }
       ACCESS  read-only
       STATUS  mandatory
       DESCRIPTION
           "Severity level of the message"
   ::= { sysLogMibObjects 5 }

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

4 个答案: