CODEWITHSUNDEEP
htmlcsshoveronhover
George Smith
George Smith

Reputation: 505

Hovering a div only if another div is hovered

I am new to HTML and CSS. At the moment, I am trying to learn them. What I want to do is hiding a div and showing him only if you hover on another div. I almost did it, but I do not know how exactly to block the div and let only the hovered part of the div visible. (Tried with display:block; and visibility:hidden; but nothing seems to work). If someone could help me I would be really thankful. Thanks in advance.

PS: The idea is when you hover on "Menu" to hover automatically a div called "OnThisPage". 

body{
  margin:0;
  padding:0;
  background-color:#232323;
}

#NavigationWrap{
	position:relative;
	width:100vw;
	height:5vw;
	background-color:#FFFFFF;
}

#Logo{
	position:relative;
	margin-left:1vw;
	top:50%;
	width:29vw;
	height:4vw;
	transform:translateY(-50%);
	float:left;
}
		
#NavigationMenu{
	position:relative;
	top:50%;
	width:70vw;
	height:2vw;
	float:right;
	transform:translateY(-50%);
}

#NavigationMenu li{
	position:relative;
	top:50%;
	list-style-type: none;
	float:right;
	transform:translateY(-50%);
}
	
#NavigationMenu li:after{
	position:relative;
	margin-right:1vw;
	font-family: 'OpenSans_Bold';
	font-size:2vw;
	content:"|";
}
	
#NavigationMenu li:first-child:after{
	content:" ";
}
	
#NavigationMenu li a{
	position:relative;
	margin-right:1vw;
	font-family: 'OpenSans_Bold';
	font-size:2vw;
	color: #cc6666;
	text-decoration: none;
}
	
#NavigationMenu li a.active{
	color:#00cccc;
}
	
#NavigationMenu li a.active:hover + #OnThisPage:hover{
	color:#000000;
}
 
#NavigationMenu li a:hover{
	position:relative;
	color:#00cccc;
	-webkit-transition: all 750ms ease;
	-moz-transition: all 750ms ease;
	-ms-transition: all 750ms ease;
	-o-transition: all 750ms ease;
	transition: all 750ms ease;
}
  
#OnThisPage{
	position:relative;
}
	
#OnThisPage:hover{
	position:absolute;
	font-size:20vw;
	top:10vw;
	left:10vw;
	width:10vw;
	height:10vw;
	background:red;
}
<div id="NavigationWrap">
		<div id="Logo">Logo</div>
		<div id="NavigationMenu">
			<li><a href="#contacts">Login</a></li>
			<li><a href="#contacts">Contact</a></li>
			<li><a href="#projects">Featured Projects</a></li>
			<li><a href="#aboue">About Me</a></li>
			<li><a class="active"  href="#home">Home</a></li>
		</div>
		<div id="OnThisPage">Test</div>

Upvotes: 0

Views: 91

Answers (1)

Paradoxetion
Paradoxetion

Reputation: 726

Here you go with jQuery, I added comments for you so you understand what you do. 

jQuery("document").ready(function() { // we wait for document to get ready state
  jQuery("#NavigationMenu li a").hover(function() { // we get hover state event on Menu
    jQuery("#OnThisPage").toggleClass("hover") // and we just toggle class "hover" for another div
  })
})

Don't forget to load jQuery like this:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

And very small change to your CSS code - it's not :hover, but .hover now

#OnThisPage.hover{
    position:absolute;
    font-size:20vw;
    top:10vw;
    left:10vw;
    width:10vw;
    height:10vw;
    background:red;
}

The idea is that we toggle class for the element when the other element is hovered and apply styles not for :hover, but for this new class.

Upvotes: 1

Related Questions