Chatbox

You are not connected. Please login or register

View previous topic View next topic Go down  Message [Page 1 of 1]

1 keep div open on hovering over div on 20/5/2012, 3:04 pm

grimofdoom

avatar

Member
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,

View user profile

LGforum

avatar

Moderator
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 user profile

View previous topic View next topic Back to top  Message [Page 1 of 1]

Permissions in this forum:
You cannot reply to topics in this forum