css - CSS悬停使div不可见

Question

我正在尝试为我的网站创建一个团队页面。主要概念是在所有职位之上并在所有成员之下。我想在某个位置悬停时使所有其他位置不可见。

的CSS：

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

问题是 css 不能按照我的方式工作。

jsfiddle 链接： jsfiddle

Answer 1

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

jsFiddle 在这里

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;
}