Welcome to WebmasterWorld Guest from 54.158.197.37

Forum Moderators: not2easy

Message Too Old, No Replies

css opacity on hover

z-index, position and margin

     
7:38 am on Jul 22, 2011 (gmt 0)

New User

5+ Year Member

joined:Oct 13, 2009
posts:17
votes: 0


Hi,

I am trying to build navigation menu.It consist 2 divs.one div for background(its opacity is .7) and another div for menu items.I stack these divs on top of each other by negative top-margin.but hover effect even "a" are not working when I set the opacity through css.How to fix that?any advice would be greatly appreciated.
code is like this
// this is background div
#nav_menu_bg
{
width:620px;
height:65px;
margin-top:55px;
background:#000;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
opacity:.7;

}

//This is menu item divs,I even tried with z-index
#nav_menu
{
width:620px;
height:65px;
margin-top:-65px;
opacity:1;
z-index:1000;

}
#nav_menu ul
{
list-style:none;
padding-top:10px;
margin-left:25px;
}
#nav_menu ul li a
{
color:white;
font-size:18px;
font-weight:bold;
text-decoration:none;
float:left;
display:block;
padding:10px 10px 14px 10px;
margin-right:40px;

}
#nav_menu ul li a:hover
{
background:#ffda0b;
color:#333;
border-radius:7px;
-moz-border-radius:7px;
-webkit-border-radius:7px;
}

Thanks in advance
9:37 am on July 22, 2011 (gmt 0)

Junior Member

10+ Year Member

joined:May 28, 2003
posts: 198
votes: 4


Hi,

z-index only applies to positioned elements so add position:relative to the #nav_menu.

I assume you have a structure like this:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
#nav_menu_bg {
width:620px;
height:65px;
margin-top:55px;
background:#000;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
opacity:.7;
}
#nav_menu {
width:620px;
height:65px;
margin-top:-65px;
position:relative;
z-index:1000;
}
#nav_menu ul {
list-style:none;
padding-top:10px;
margin:0 0 0 25px;
}
#nav_menu ul li a {
color:white;
font-size:18px;
font-weight:bold;
text-decoration:none;
float:left;
display:block;
padding:10px 10px 14px 10px;
margin-right:40px;
}
#nav_menu ul li a:hover {
background:#ffda0b;
color:#333;
border-radius:7px;
-moz-border-radius:7px;
-webkit-border-radius:7px;
}
</style>
</head>
<body>
<div id="nav_menu_bg"></div>
<div id="nav_menu">
<ul>
<li><a href="#">test</a></li>
<li><a href="#">test</a></li>
<li><a href="#">test</a></li>
<li><a href="#">test</a></li>
</ul>
</div>
</body>
</html>

11:34 am on July 22, 2011 (gmt 0)

New User

5+ Year Member

joined:Oct 13, 2009
posts:17
votes: 0


Thank You so much.nav_menu required positioning. Its works.But to clarify could you please tell me why only negative margin didn't served the purpose?without giving z-index and position.

<style>
#nav_menu_bg
{
width:620px;
height:65px;
opacity:.7;
...
}
#nav_menu
{
width:620px;
height:65px;
margin-top:-65px;

}
</style>
<body>
<div id="nav_menu_bg"></div>
<div id="nav_menu">
<ul>
<li><a href="#">test</a></li>
<li><a href="#">test</a></li>
<li><a href="#">test</a></li>
<li><a href="#">test</a></li>
</ul>
</div>
</body>

Thanks once again.
12:35 pm on July 22, 2011 (gmt 0)

Junior Member

10+ Year Member

joined:May 28, 2003
posts: 198
votes: 4


The overlapping of non positioned elements is not specifically defined in the specs (iirc) but usually the one that follows later in the html will go on top of one before if there are overlaps.

However, in your case this didn't happen because the #nav_menu_bg had opacity applied and I guess the browser treats this as more important because opacity applies to the parent and all its children as a whole. It's not inherited as such. The elements are all rendered and then opacity applied to them as a whole which is why you can't cut it off on inner elements - hence the need for your negative margin trick.

If you had added opacity:.99 to your #nav_menu then I believe it would have overlapped as you wished (opacity:1.0 means no opacity so does nothing really).

However, you are then leaving things to chance and expecting browsers all to behave the same. Therefore by adding position:relative and a higher z-index you avoid any mistakes a browser may make and control the situation yourself.