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

我试图做出从中是徘徊元素列表元素透明度变化我的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并且当其为unhovered其它元件盘旋我怎样才能实现这一点应该改变到相应的样式。

来源

2016-04-25 Mandar Kawtakwar

相关（但不是一个确切的重复）：http://stackoverflow.com/questions/1817792/is-there-a-previous-sibling-css-selector – Matt

-1

如果它是一个直接的兄弟姐妹，你可以使用+选择。那么任何兄弟姐妹，是不是一个立即的兄弟姐妹可以使用~选择

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

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

来源

2016-04-25 10:56:45

但是使用这种方法，我们只能选择徘徊的元素。以前的元素呢？ –

这是一直以来的痛苦。此外，选择父母，而不是仅仅是孩子会很高兴。在这种情况下，我想知道你是否可以使用：not（：hover） –

CSS没有以前的兄弟选择您想达到这样什么是不可能单独使用CSS。

如果你是开放的一个JavaScript的解决方案，你可以做这样的：

var \t 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>

来源

2016-04-25 10:59:34 Shaggy

+和~选择可以选择下一个相邻的和其他元素，但遗憾的是没有CSS选择css中的以前元素

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

来源

2016-04-25 10:59:50

你只需要添加更多的CSS代码

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

这里是工作demo您的问题

来源

2016-04-25 11:00:17

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

回答

相关问题