How can I have a child div appear when I hover on the parent div? Please view.Fiddle My apologies if my code is incorrect.
Thank you
-
do you want the solution with just css or can use jquery/javascript?JGV– JGV2015-06-10 17:24:12 +00:00Commented Jun 10, 2015 at 17:24
-
Are you looking for something like this? jsfiddle.net/gpzh153d/5JGV– JGV2015-06-10 17:24:51 +00:00Commented Jun 10, 2015 at 17:24
-
possible duplicate of Hovering over image and reveal div elementAbdul Ahmad– Abdul Ahmad2015-06-10 19:50:47 +00:00Commented Jun 10, 2015 at 19:50
Add a comment
|
3 Answers
I know you have not mentioned jQuery as your tag but here is a solution which does the trick.
If you can use jQuery then I suggest you to use to achieve what you want because changing CSS property of one element when another element is hovered on is bit tricky and has many limitations,
Here is a simplified fiddle with jQuery
This is the jQuery script that you can add in your file,
$(document).ready(function(){
$("#a11").mouseover(function(){
$("#submenu11").show();
});
$("#a11").mouseout(function(){
$("#submenu11").hide();
});
});
One more thing, it is not advisable to have id that starts with number, in your case id="11" might have issues in some browsers, that's why I have substituted id=11 with id="a11"
If due to some reasons you don't want to use jQuery then I can give you an alternative approach using JavaScript
Comments
#submenu11 {
width:550px;
height:400px;
float:none;
padding-left:1px;
padding-top:1px;
margin-right; 10px;
font: 15px/30px sans-serif;
clear: left;
margin-left: 181px;
border: 1px solid blue;
border-bottom: 5px solid blue;
}
#left1, #right1 {
width: 35%;
float:left;
margin-top: -85px;
}
#left1 {
margin-right: 1px;
border: 1px solid green;
box-sizing: inline-block;
height: 100%;
}
#right1 {
display: inline-block;
box-sizing: border-box;
width: 60%;
height: 100%;
border: 1px solid red;
}
#abc_11 {
font: 15px/30px sans-serif;
height: 300px;
width:170px;
display: inline-block;
line-height:30px;
background-color:white;
float:left;
padding-right:10px;
border-right: 1px solid #0057A4;
clear:left;
}
submenulist ul li {
list-style-type: none;
clear: left;
margin-left: -40px ;
}
a.menu1 {
font: 15px/30px sans-serif;
height: 30px;
width: 170px;
display: inline-block;
line-height: 30px;
background-color: white;
float: left;
padding-left:20px;
border-right: 1px solid blue;
margin-left: -10px;
clear:left;
text-decoration: none;
color: black;
}
a.submenulink1 {
border-right: 0px solid #E1E1E1;
border-top: 0px solid #444;
color: black;
display: block;
text-align: left;
padding-left: 10px;
text-decoration: none;
width: 100%;
font: 15px/30px sans-serif;
height: 30px;
}
a.submenulink1:hover {
background: lime;
color: white;
}
.hide
{
display:none;
}
#abc_11:hover#abc_11 + #submenu11{
display:block;
}
<div>
<div id="abc_11">
<a class="menu1" href="#">GALAXY 11</a>
</div>
<div id="submenu11" class="hide">
<div id="left1">
<ul class="nav1">
<li class="submenulist"><a class="submenulink1" href="#">GALAXY S6 Edge</a></li>
<li class="submenulist"><a class="submenulink1" href="#">GALAXY S6</a></li>
<li class="submenulist"><a class="submenulink1" href="#">GALAXY S5</a></li>
<li class="submenulist"><a class="submenulink1" href="#">GALAXY S4 Mini</a></li>
<li class="submenulist"><a class="submenulink1" href="#">GALAXY S3 Mini VE</a></li>
</ul>
</div>
<div id="right1">
<img src="http://www.samsung.com/uk/next/img/estore-recommend- images/mobiles/S6edgegreen.jpg" alt=""></img>
<a href="#">GALAXY S6 Edge information</a>
</div>
</div>
</div>
I guess there is some issue with id being a number.
2 Comments
Anirudh Modi
stackoverflow.com/questions/70579/… you can go through this post, which specifies why the values which we can assign to id. You also need to keep both the "abc_11" and "subMenu11" div inside a single div, as it is written that both the div must belong to the same parent. Hope this helps
Elvis
Thank you Anirudh Modi. The issue was with ID being a number. I updated the IS with a letter.
For the sake of simplicity, you may want to look into a readymade menu solution like this one:
http://users.tpg.com.au/j_birch/plugins/superfish/examples/
The advantage is that you will get a crossbrowser compatible solution.
