2015-06-10 106 views
2

当我将鼠标悬停在父div上时,如何显示小孩div?请查看.Fiddle如果我的代码不正确,我很抱歉。div ul列表css菜单

谢谢

+0

你想要的解决方案只是CSS或可以使用jQuery的/ JavaScript? –

+0

你在找这样的东西吗? https://jsfiddle.net/gpzh153d/5/ –

+0

可能重复的[悬停在图像和显示div元素](http://stackoverflow.com/questions/29712201/hovering-over-image-and-reveal-div-元素) –

回答

1
#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> 

我猜测另一种方法存在一些问题与id是一个数字。

+0

http://stackoverflow.com/questions/70579/what-are-valid-values-for-the-id-attribute-in-html 你可以通过这个帖子,它指定了为什么值可以分配给ID。 您还需要将“abc_11”和“subMenu11”div同时保留在一个div中,因为它写入的div必须属于同一个父级。 希望这可以帮助 –

+0

谢谢你Anirudh莫迪。问题是ID是一个数字。我用一封信更新了IS。 – Elvis

+0

欢迎您:) –

2

我知道你没有提到jQuery作为你的标签,但这里有一个解决方案,它可以做到这一点。

如果你可以使用jQuery的话,我建议你使用,以达到你想要什么,因为当其他元素悬停在一个元素的改变CSS属性是有点棘手,有很大的局限性,

Here is a simplified fiddle with jQuery

这是jQuery的脚本,您可以在文件中添加,

$(document).ready(function(){ 
    $("#a11").mouseover(function(){ 

     $("#submenu11").show(); 
    }); 
    $("#a11").mouseout(function(){ 

     $("#submenu11").hide(); 
    }); 
}); 

一两件事,这是不可取的有ID与数字开始,你的情况id="11"可能有问题一些浏览器,这就是为什么我已经取代id=11id="a11"

如果由于某种原因你不想使用jQuery话,我可以给你使用JavaScript