CodingHelp

CodingHelp offers support for all your web design needs.


keep div open on hovering over div

 :: Coding & Design :: Coding Problems & Support

View previous topic View next topic Go down

keep div open on hovering over div Empty keep div open on hovering over div

#1530
grimofdoom
grimofdoom
Member
Member
Forum Posts : 106
Member Since : 2012-03-06

Postgrimofdoom 20/5/2012, 1:04 pm

I have this code
Code:
<head><title>BETA V-1.0</title>
<style type=text/css>
body{background-color:black;margin:0px}

.container{height:637px;width:1357px;background-color:lightgreen;border-radius:15px;border:3px white solid;position:relative;border-style:groove solid;}

.menu{position:absolute;bottom:0px;background-color:black;width:100%;height:10%;;border-bottom-right-radius:11px;border-bottom-left-radius:11px;border-top-left-radius:90;}

.circ{height:20px;width:20px;border-radius:10;background-color:lightgreen;float:right;top:2px;right:3px;position:relative;}

.HOMe{;background-color:black;width:auto;position:absolute;bottom:20px;left:500px;border-radius:2;border:2px lightgreen solid;color:white;-webkit-transform:scale(2);}

.Anime{;background-color:black;width:auto;position:absolute;bottom:20px;left:585px;border-radius:2;border:2px lightgreen solid;color:white;-webkit-transform:scale(2);}.Featured{;background-color:black;width:6%;position:absolute;bottom:20px;left:347px;border-radius:2;border:2px lightgreen solid;color:white;-webkit-transform:scale(2);}

.News{;background-color:black;width:auto;position:absolute;bottom:20px;left:672px;border-radius:2;border:2px lightgreen solid;color:white;-webkit-transform:scale(2);}

.Featured{;background-color:black;width:auto;position:absolute;bottom:20px;left:764px;border-radius:2;border:2px lightgreen solid;color:white;-webkit-transform:scale(2);}

.menutop{position:absolute;top:0px;background-color:black;width:100%;height:10%;;border-top-right-radius:11px;border-top-left-radius:11px;}

.title{width:auto;height:auto;top:1px;left:40%;background-color:lightgreen;position:absolute;font-size:45px;border-radius:10 15;border:2px groove;}

#menu:hover{-webkit-transform:scale(2.1);border-color:yellow;}

.news1{width:60%;height:20%;background-color:lightgreen;color:black;font-size:15px;overflow-x:hidden;overflow-y:auto;position:relative;top:90px;}

.row1{position:relative;left:150px;top:120px;background-color:lightblue;width:120px;height:400px;border:3px groove green;text-decoration:none;font-size:12;overflow-x:hidden;overflow-y:auto;}

#vid{border:1px solid;width:100px;height:100px;}

.grow:hover{-webkit-transform:scale(1.1);-moz-transform:scale(1.1);-o-transform:scale(1.1);border:1px solid yellow;}

.browse{width:auto;height:auto;border-radius:3;background-color:lightgreen;position:absolute;left:35px;top:25px;}

#browse:hover + div#browlist {display:block;}

.browlist{background-color:white;position:relative;top:70%;left:2%;width:100px;height:auto;}

#browlist{display:none;background-color:white;position:relative;top:70%;left:2%;width:100px;height:auto;}

a{text-decoration:none;color:black;}

</style>
</head><body>

<!--CONTAINER TO HOLD EVERYTHING-->
<div id=browlist class=browlist>listed stuff</div>
<div class=container>

<!--ALL TOP MENU STUFF GOES HERE-->
<div class=menutop>
<div class=browse id=browse>Browse</div>

<div id=browlist class=browlist>listed stuff</div>

<div class=title><center>Anime</center></div>
</div>

<div class=row1><center>
<a href=/newtemplates/beta/anime/hotd/cover.html ><div id=vid class=grow style="background-image:url('http://fc06.deviantart.net/fs70/i/2010/229/7/b/High_School_of_dead_Wallpaper_by_farlak219.png');background-size:100px 100px;;"></div><br>Prev-High of...</a>
<br>

</center></div>



<!--MENU BAR TO NAVIGATE EVERYWERE-->
<div class=menu>
<a href=http://animereject.hostei.com/newtemplates/beta/home.html><div class=home id=menu><center>Home</center></div></a>

<a href=http://animereject.hostei.com/newtemplates/beta/anime.html><div class=anime id=menu><center>Anime</center></div></a>

<a href=#><div class=featured id=menu><center>Featured</center></div></a>

<a href=http://animereject.hostei.com/newtemplates/beta/news.html><div class=news id=menu><center>News</center></div></a>

<div class=circ></div>
</div>
</div>


</body>
for this pagehttp://animereject.hostei.com/newtemplates/beta/anime.html But when i hover over "browse" and then "listed stuff" it does not stay open, it got back to display:none once i hover over the "listed stuff". Can someone fix this code to work were i can hover over "listed stuff" after i hover over browse.TY,

keep div open on hovering over div Empty Re: keep div open on hovering over div

#1533
LGforum
LGforum
Moderator
Forum Posts : 77
Member Since : 2011-11-12

PostLGforum 21/5/2012, 11:40 am

Try swapping it all for this:
Code:

<head><title>BETA V-1.0</title>
<style type=text/css>
body{background-color:black;margin:0px}

.container{height:637px;width:1357px;background-color:lightgreen;border-radius:15px;border:3px white solid;position:relative;border-style:groove solid;}

.menu{position:absolute;bottom:0px;background-color:black;width:100%;height:10%;;border-bottom-right-radius:11px;border-bottom-left-radius:11px;border-top-left-radius:90;}

.circ{height:20px;width:20px;border-radius:10;background-color:lightgreen;float:right;top:2px;right:3px;position:relative;}

.HOMe{;background-color:black;width:auto;position:absolute;bottom:20px;left:500px;border-radius:2;border:2px lightgreen solid;color:white;-webkit-transform:scale(2);}

.Anime{;background-color:black;width:auto;position:absolute;bottom:20px;left:585px;border-radius:2;border:2px lightgreen solid;color:white;-webkit-transform:scale(2);}.Featured{;background-color:black;width:6%;position:absolute;bottom:20px;left:347px;border-radius:2;border:2px lightgreen solid;color:white;-webkit-transform:scale(2);}

.News{;background-color:black;width:auto;position:absolute;bottom:20px;left:672px;border-radius:2;border:2px lightgreen solid;color:white;-webkit-transform:scale(2);}

.Featured{;background-color:black;width:auto;position:absolute;bottom:20px;left:764px;border-radius:2;border:2px lightgreen solid;color:white;-webkit-transform:scale(2);}

.menutop{position:absolute;top:0px;background-color:black;width:100%;height:10%;;border-top-right-radius:11px;border-top-left-radius:11px;}

.title{width:auto;height:auto;top:1px;left:40%;background-color:lightgreen;position:absolute;font-size:45px;border-radius:10 15;border:2px groove;}

#menu:hover{-webkit-transform:scale(2.1);border-color:yellow;}

.news1{width:60%;height:20%;background-color:lightgreen;color:black;font-size:15px;overflow-x:hidden;overflow-y:auto;position:relative;top:90px;}

.row1{position:relative;left:150px;top:120px;background-color:lightblue;width:120px;height:400px;border:3px groove green;text-decoration:none;font-size:12;overflow-x:hidden;overflow-y:auto;}

#vid{border:1px solid;width:100px;height:100px;}

.grow:hover{-webkit-transform:scale(1.1);-moz-transform:scale(1.1);-o-transform:scale(1.1);border:1px solid yellow;}

.browse{width:auto;height:auto;border-radius:3;background-color:lightgreen;position:absolute;left:35px;top:25px;}

#browse:hover #browlist {display:block;}

.browlist{background-color:white;position:relative;top:70%;left:2%;width:100px;height:auto;}

#browlist{display:none;background-color:white;position:relative;top:70%;left:2%;width:100px;height:auto;}

a{text-decoration:none;color:black;}

</style>
</head><body>

<!--CONTAINER TO HOLD EVERYTHING-->
<div class=browlist>listed stuff</div>
<div class=container>

<!--ALL TOP MENU STUFF GOES HERE-->
<div class=menutop>
<div class="browse" id="browse">
<div>Browse</div>
<div id=browlist class=browlist>listed stuff</div>
</div>

<div class=title><center>Anime</center></div>
</div>

<div class=row1><center>
<a href=/newtemplates/beta/anime/hotd/cover.html ><div id=vid class=grow style="background-image:url('http://fc06.deviantart.net/fs70/i/2010/229/7/b/High_School_of_dead_Wallpaper_by_farlak219.png');background-size:100px 100px;;"></div><br>Prev-High of...</a>
<br>

</center></div>



<!--MENU BAR TO NAVIGATE EVERYWERE-->
<div class=menu>
<a href=http://animereject.hostei.com/newtemplates/beta/home.html><div class=home id=menu><center>Home</center></div></a>

<a href=http://animereject.hostei.com/newtemplates/beta/anime.html><div class=anime id=menu><center>Anime</center></div></a>

<a href=#><div class=featured id=menu><center>Featured</center></div></a>

<a href=http://animereject.hostei.com/newtemplates/beta/news.html><div class=news id=menu><center>News</center></div></a>

<div class=circ></div>
</div>
</div>


</body>

You need to look into the use of ID attributes. ID's are unique, there should only be one element with an ID, and no more elements with the same ID. That's what classnames are for. ID's are unique. So you may need to sort out the invalid HTML first.

View previous topic View next topic Back to top

Create an account or log in to leave a reply

You need to be a member in order to leave a reply.

Create an account

Join our community by creating a new account. It's easy!


Create a new account

Log in

Already have an account? No problem, log in here.


Log in

CodingHelp :: Coding & Design :: Coding Problems & Support

 
Permissions in this forum:
You cannot reply to topics in this forum
Free forum | ©phpBB | Free forum support | Report an abuse | Forumotion.com