Home  • Programming • HTML5

How to make hover menu without JavaScript

Problem: Say there are two div elements in your web page, one is red and other is blue. If you move mouse on the red div element, then blue div element will be displayed. Blue div element will not be displayed otherwise. NB: Solution will be only by CSS and HTML. First Solution: 
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Hover Menu</title>
<style>
#red{ width:200px; height:50px; background-color:red; position:relative}
#red:hover #blue{display:inline}
#blue{width:100%; height:200px; background-color:blue; display:none;z-index:-1; position:absolute;}
</style>
</head>
<body>
<div id="red">
  <div id="blue"></div>
</div>
</body>
</html>
Second solution 
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Hover Menu</title>
<style>
#red{width:200px; height:50px; background-color:red;}
#red:hover~#blue{display:block}
#blue{width:200px; height:200px; background-color:blue; display:none;}
</style>
</head>
<body>
<div id="red">  
</div>
<div id="blue">
</div>
</body>
</html>
  
 /14

Comments 6


MASHA ALLAH! THANK YOU SIR, you have made it soooooooooooo simpleeeeee!
but sir, one div is inside of the other div. but how can we do it with two independent div that is one div is upside and one div is downside. and how and why the negative z-index works, would you please explain, the display=none should be sufficient.
Dear Boby, See the second solution.
MASHA ALLAH! THANK YOU SIR VERY MUCH. I will surely try it now. But for the time being,
But for the time being, SIR, I have again failed to select or grab the correct selector to do hover menu action............would you please see my code again? here is the code:
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Dropdown Menu Test3</title>
<style type="text/css">
body{
background-color:#9E9E69;
margin:0px;
padding:0px;
}

div.divcolor{
height:100px;
width:200px;
/*opacity:.50;filter:alpha(opacity=50);*/
}

#divred{
display:block;
float:left;
position:absolute;
z-index:1;
background-color:#CC0066;
}

#divred:hover #divblue{
display:block;
}

#divblue{
display:none;
z-index:-1;
position:absolute;
background-color:#3399CC;
left:0px;
top:100px;
}

#divgreen{
display:block;
position:absolute;
z-index:1;
background-color:#33CC33;
left:201px;
top:0px;
}

#divgreen:hover #divyellow{
display:block;
}

#divyellow{
display:none;
z-index:-1;
position:absolute;
background-color:#FFFF33;
left:201px;
top:100px;
}

#divred:hover{
border:;
background-color:;
opacity:.10;filter:alpha(opacity=10);
}

#divgreen:hover{
border:;
background-color:;
opacity:.10;filter:alpha(opacity=10);
}

</style>
</head>

<body>

<div id="divalldivcontainer"> 
    <div id="divred" class="divcolor">aaaa</div>
    <div id="divgreen" class="divcolor">bbbb</div>
    <div id="divblue" class="divcolor">cccc</div>
    <div id="divyellow" class="divcolor">dddd</div>
</div>

</body>
</html>
Ami html5 mcq khuje passina
About Author
Mohammad Towhidul Islam
Copyright © 2024. Powered by Intellect Software Ltd