CODEWITHSUNDEEP
css
Tasos
Tasos

Reputation: 7577

CSS hover make div invisible

I am trying to create a team page for my site. The main concept is to have on top all the positions and bellow all the members. I want to make on hover on a certain position all the other positions invisible.

The css:

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

The problem is that the css doesn't work with the way I did it.

The jsfiddle link: jsfiddle

Upvotes: 1

Views: 869

Answers (1)

Mohsen Safari
Mohsen Safari

Reputation: 6795

for doing this with pure CSS, you need to change your html code. look at this code:

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

Upvotes: 3

Related Questions