• Locked
No replies
Thu, 2016-10-06 06:07
Fouad.css
Fouad.css's picture
Offline
newbie
Amsterdam
Last seen: 6 years 34 weeks ago
Amsterdam
Timezone: GMT+2
Joined: 2016-10-06
Posts: 1
Points: 2

Hi Guys,

I am working on a website and keep bumping into this problem. I am trying to make all other div's dissapear while hovering on one. But when I get further in the line of boxes, the previous ones won't dissapear. I think the problem is with the general sibling sign. But i can't figure out what else i could do to make them go away. I hope this makes sence? Here is my code:

<body>
		<div id="page">
            <div class="one blokken"></div>
            <div class="two blokken"></div>
            <div class="three blokken"></div>
            <div class="four blokken"></div>
            <div class="five blokken"></div>
            <div class="six blokken"></div>
		</div>	
</body>
 
/* CSS Document */
 
.blokken {
	position:absolute;
	width:100px;
	height:180px;
	top:200px;
	background:#1a1a1a;
}
 
.one {
	left:100px;
}
 
.two {
	left:300px;
}
 
.three {
	left:500px;
}
 
.four {
	left:700px;
}
 
.five {
	left:900px;
}
 
.six {
	left:1100px;
}
 
.one:hover ~ .blokken {
	display:none;
}
 
.two:hover ~ .blokken {
	display:none;
}
 
.three:hover ~ .blokken {
	display:none;
}
 
.four:hover ~ .blokken {
	display:none;
}
 
.five:hover ~ .blokken {
	display:none;
}
 
.six:hover ~ .blokken {
	display:none;
}
<code>

Top
Tags: