javascript - 为什么我的选择器(a :hover ~ a ) not working as intended?

Question

我想要完成的是当我将鼠标悬停在一个链接上时，它将使其他链接成为 opacity: .1同时保持该链接颜色相同。

我尝试做的是 a:hover ~ a ，但它不起作用。我用基本的 <a href=""> 创建了一个新的 jsfiddle它工作正常，但我不明白为什么不是这样。

http://codepen.io/jzhang172/pen/OMRqpK

    @import url("http://fonts.googleapis.com/css?family=Ubuntu+Condensed");

    *{
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }

    html{
     background: url('img/congruent_pentagon.png');
    }

    body{

    margin:0px;
    }
    #wrapper{
        height: auto;
        width: 100%;
        max-width: 300px;
        margin-left: auto;
        margin-right: auto;
        background-color: #fff;
        margin-top: 2em;
        margin-bottom: 2em;
        height: 700px;
        background: transparent;
        font: 25px/24px normal 'Ubuntu Condensed', sans-serif;
    }

    a{
        text-decoration: none;
    }

    .social{
        display: inline-block;
        position: relative;
        width: 100%;
        padding: 16px;
        margin-bottom: 16px;
        margin-right: 16px;
        background-color: rgba(231, 231, 231, 0.6);
        box-shadow: 8px 8px 0 0px rgba(0, 0, 0, 0.25);
    }

    nav{
     padding-top: 8px;
     padding-left: 8px;
     padding-right: 8px;
 }

 nav ul{
    margin: 0;
    padding: 0;
    list-style: none;
}

nav ul li{
    display: inline;
}

nav ul li a:hover{
    opacity: 0.7;
}

nav ul li a.email{
 border-left: 50px solid #c9182c;
 color: #c9182c;
}

nav ul li a.twitter{
    border-left: 50px solid #00a0d1;
    color: #00a0d1;
}

nav ul li a.facebook{
    border-left: 50px solid #365998;
    color: #365998;
}

nav ul li a.github{
    border-left: 50px solid #4183c4;
    color: #4183c4;
}

nav ul li a.google{
    border-left: 50px solid #db4a39;
    color: #db4a39;
}

nav ul li a.instagram{
    border-left: 50px solid #634d40;
    color: #634d40;
}

nav ul li a.tumblr{
    border-left: 50px solid #34526f;
    color: #34526f;
}

nav ul li a.scriptogram{
 border-left: 50px solid #0088cc;
 color: #0088cc;
}
nav ul li a.linkedin{
    border-left: 50px solid #0e76a8;
    color: #0e76a8;
}

.container{
    width:100%;
    
    text-align:center;
    padding-top:20px;
     padding-bottom: 20px;

    
}
.container h1{
    font-family: 'EB Garamond', serif;
    font-size:55px;
    width:500px;
    margin:0 auto;
    border-top:1px solid black;
    border-bottom:1px solid black;
    font-weight:0px;

}
.container span{
    width:100px;
    height:300px;
}
h2{
    font-family: 'Lora', serif;
    text-align:center;
    font-size:25px;f
    font-weight:normal;
    color:#0B437D;

}


a.tumblr:hover ~ a.social{
    opacity:.1;
}

<div id="wrapper">
  <nav>
    <ul>
      <li><a class="social tumblr" href="#" target="_blank"><img src="img/svg/home.svg">Home</a></li>
      <li><a class="social google" href="#" target="_blank"><img src="img/svg/prod.svg">Products</a></li>
      <li><a class="social google" href="#" target="_blank"><img src="img/svg/about.svg">About</a></li>
      <li><a class="social facebook" href="#" target="_blank"><img src="img/svg/fb.svg">Facebook</a></li>
      <li><a class="social twitter" href="#" target="_blank"><img src="img/svg/twitter1.svg">Twitter</a></li>
      <li><a class="social instagram" href="#" target="_blank"><img src="img/svg/insta.svg">Instagram</a></li>
      
    </ul>
  </nav>
</div>

Answer 1

如其他答案中所述，使用 general sibling combinator 无法达到您想要的效果(~)。

不过我觉得用纯CSS还是可以达到效果的。试试这个:

ul:hover li:not(:hover) { opacity: .1; }

Revised Demo

---

解释

li:not(:hover) 将匹配所有未悬停的列表项。但是我们不能单独使用它，因为这样所有列表项都会默认具有 opacity: .1。

因此我们以 ul:hover 开始选择器，它创建了一个 descendant selector说:不要应用 li:not(:hover) 除非 ul 首先悬停。