CSS悬停使div不可见

Question

我正在尝试为我的网站创建一个团队页面。主要概念是掌握所有职位，并贬低所有成员。我希望将所有其他位置悬停在某个位置上是不可见的。

css：

#team1:hover + #id-team-2 #id-team-3{display:none;}

问题是css不能像我这样做。

jsfiddle链接： jsfiddle

Answer 1

使用纯CSS执行此操作时，您需要更改html代码。 看看这段代码：

jsFiddle is here

HTML：

<div>
    <div id="team1">Team1</div>
    <div id="team2">Team2</div>
    <div id="team3">Team3</div>

    <div id="thumbnails">
        <div id="thumbnail1"></div>
        <div id="thumbnail2"></div>
        <div id="thumbnail3"></div>
    </div>

</div>

CSS：

#team1,#team2,#team3{
    float:left;
    width:90px;
    margin:0 5px;
    padding:5px;
    background:#eee;
    text-align:center;
}
#thumbnails{
    float:left;
    width:100%
}
#thumbnails div{
    background:tomato;
    margin:0 5px;
    width:100px;
    height:100px;
    float:left;
}
#team1:hover ~ #thumbnails > #thumbnail2,
#team1:hover ~ #thumbnails > #thumbnail3{
    visibility:hidden;
}
#team2:hover ~ #thumbnails > #thumbnail1,
#team2:hover ~ #thumbnails > #thumbnail3{
    visibility:hidden;
}
#team3:hover ~ #thumbnails > #thumbnail2,
#team3:hover ~ #thumbnails > #thumbnail1{
    visibility:hidden;
}