the z-index on click..
the z-index on click..
hello evrybody, ...
i'm new with jquery and i wanted to create an effect but i can't understand where i'm making the mistake...
basically from a menu i'd like to pop-out the description of the element of the menu... in a "bubble"..
that should appear and disapper with a hover...
the problem is that underneath the menu there is adiv with image, and the bubble go under it, even if i dynamically change the z-index.--- Doy uo know how this should work?.. this is the definition of css for the menu and and image and the script...
thanks a lot...
#menu li {
display:block;
float:left;
list-style:none;
margin:0;
padding:0 10px 3px 0 ;
right:40%;
position:relative;
}
#menu ul li a {
display:block;
margin:0 ;
padding:0;
background:#fff;
font-family:"Georgia";
font-size:16px;
color:#4C4747;
text-decoration:none;
text-align:left;
}
#menu ul li a.active,
#menu ul li a.active:hover {
color:#fff;
background:#000;
font-weight:bold;
}
#menu span
{
background:url(images/ttbg2.jpg) no-repeat;
width: 110px;
height: 35px;
position: absolute;
font-family:"Georgia";
font-size:10px;
top: 10px;
left: 0px;
text-align: center;
padding: 5px;
display: none;
line-height:110%;
color:#000000;
cursor:pointer;
}
#index_img{
clear: left;
padding: 0;
margin-left: 40%;
overflow:hidden;
text-align:left;
position:relative;
}
-----------------
jQuery(document).ready(function(){
$("#menu li").hover(
function(){
$(this).find("span").attr({'z-index' : '100'})
$(this).find("span").attr({
"style": 'display:inline'
});
$(this).find("span").animate({opacity: 1, bottom: "+=10"}, {queue:false, duration:800});
},
function(){
$(this).find("span").attr({'z-index' : '100'})
$(this).find("span").animate({opacity: 0, top: "+=10"}, {queue:false, duration:800}, "linear",
function(){
$(this).find("span").attr({"style": 'display:none'});
}
);
});
});