Pages(menu)

Hovering Data with Jquery & JS

Hovering Data with Jquery & JS
JS
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> 
<script>
$(document).ready(function(){
    $(".div1").hover(function(){
        $(".div11").show();
        $(".div21").hide();
        $(".div31").hide();
        $(".div41").hide();
        $(".div51").hide();
    });
});
$(document).ready(function(){
    $(".div2").hover(function(){
        $(".div21").show();
        $(".div11").hide();
        $(".div31").hide();
        $(".div41").hide();
        $(".div51").hide();
    });
});
$(document).ready(function(){
    $(".div3").hover(function(){
        $(".div31").show();
        $(".div21").hide();
        $(".div41").hide();
        $(".div11").hide();
        $(".div51").hide();
    });
});

</script>
CSS
<style>
.main
{
margin:0 auto; 
padding:5px 5px;
width:980px;
height:40px; 
border:0px solid #000;
}
.div11,.div21,.div31
{ 
display:none;
}
.div1
{
width:150px; 
height:30px; 
border:1px solid #000; 
float:left; 
margin-left:10px;
background:#060; 
color:#FFF; 
text-align:center;
}
.div1:hover
{
background:#999;
color:#060;
text-align:center;
font-size:18px;
}
.div2
{
width:150px;
height:30px;
border:1px solid #000;
float:left; 
margin-left:10px;
background:#060;
color:#FFF; 
text-align:center;
}
.div2:hover
{ 
background:#999;
color:#060; 
text-align:center;
font-size:18px;
}
.div3
{
width:150px; 
height:30px;
border:1px solid #000;
float:left;
margin-left:10px;
background:#060; 
color:#FFF; 
text-align:center;
}
.div3:hover
{
background:#999; 
color:#060;
text-align:center;
font-size:18px;}
.div5:hover
{ 
background:#999;
color:#060;
text-align:center; 
font-size:18px;
}
.div11
{ 
margin-top:30px;
width:150px; 
height:100px;
border:0px solid #000;
float:left;
}
.div21
{ 
margin-top:30px;
width:150px; 
height:100px;
border:0px solid #000; 
float:left;
}
.div31
{ 
margin-top:50px;
width:150px;
height:100px; 
border:0px solid #000;
float:left;
}
</style>
Coding
<div class="main">
<div class="div1" >Rose
<div class="div11">
 <img src="rose.jpg"  width="100%" height="100"/>
</div>
</div>
<div class="div2" >Lotus
<div class="div21">
<img src="lo.jpg"  width="100%" height="100"/>
</div>
</div>
<div class="div3" >Lilly
<div class="div31">
<img src="lii.jpg"  width="100%" height="100"/>
</div>
</div>
</div>

No comments:

Post a Comment