Question

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

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

    @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

普通兄弟组合子（~）匹配兄弟姐妹，您的链接不是兄弟姐妹。

包含它们的列表项是兄弟姐妹，这使链接本身 cousins 。

无法使用CSS描述链接之间的关系（没有父组合子）。

您最接近的将是使用li:hover ~ li > a。

Answer 2

正如其他答案中所述，使用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首先悬停

Answer 3

我尝试做的是：hover~a，但它不起作用。我创造了一个新的jsfiddle与基本，它工作正常，但我不是理解为什么这不是。

General sibling combinator selector ~选择具有相同父元素的元素。

8.3.2. General sibling combinator

一般兄弟组合器由＆＃34; tilde＆＃34; （U + 007E，〜）   分隔两个简单选择器序列的字符。该   由两个序列表示的元素共享同一个父元素   文档树和第一个序列表示的元素   先于（不一定是立即）由...表示的元素   第二个。

目前

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

a.social个元素与li元素没有相同的a.tumbler个元素

Answer 4

所以，你正试图做类似的事情：

Cow browncow;

vector <Cow> Cows;

Mat temp;
threshold.copyTo(temp);

vector< vector<Point> > contours;
vector<Vec4i> hierarchy;

findContours(temp, contours, hierarchy, CV_RETR_CCOMP, CV_CHAIN_APPROX_SIMPLE);

所有“元素”已经可见，然后“悬停”元素触发其他元素“消失”

为什么我的选择器（a：hover~a）没有按预期工作？

4 个答案: