Venho pedir ajuda encarecidamente. To levando uma surra!!
Preciso fazer o seguinte: ao passar o mouse sobre uma li, apareça uma imagem no fundo, q deve sair no mouseout.
Tá tudo praticamente 100%, mas estou me perdendo em alguma coisa, q está fazendo com q essa imagem do hover apareça deslocada. Além disso, preciso ajustar para q qdo o hover estiver em ação, ele não desloque as demais cidades pra baixo.
Exemplo:
Porto Alegre (RS)
Dia 20/08
Ao passar o mouse, aparece uma imagem de fundo e ao clicar, abrem os detalhes com esta imagem do hover.
Me ajudem, por favor??????
Exemplo no site
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>site</title>
<script type="text/javascript">
<!--
function MM_showHideLayers() { //v9.0
var i,p,v,obj,args=MM_showHideLayers.arguments;
for (i=0; i<(args.length-2); i+=3)
with (document) if (getElementById && ((obj=getElementById(args[i]))!=null)) { v=args[i+2];
if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; }
obj.visibility=v; }
}
//-->
</script>
</head>
<link rel="stylesheet" type="text/css" href="reset.css">
<link rel="stylesheet" type="text/css" href="frat.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {
$("li").hover(
function(){$(this).addClass("hover")},
function(){$(this).removeClass("hover")}
);
})
</script>
<body bgcolor="#CCCCCC">
<div id="mask">
<div id="div0">
<ul>
<li> <a href="#" class="cidade" onclick="MM_showHideLayers('div0','','hide');MM_showHideLayers('cid1','','show')">Porto Alegre (RS <br />
<b>20/08</b></a> </li>
</ul>
<div id="espaco" style="visibility:hidden"> </div>
<ul>
<li> <a href="#" class="cidade" onclick="MM_showHideLayers('div0','','hide');MM_showHideLayers('cid2','','show')">Rio de Janeiro (RJ) <br />
<b>21/08</b></a> </li>
</ul>
<div id="espaco" style="visibility:hidden">.</div>
<ul>
<li> <a href="#" class="cidade" onclick="MM_showHideLayers('div0','','hide');MM_showHideLayers('cid3','','show')">São Paulo (SP) <br />
<b>30/08</b></a> </li>
</ul>
<div id="espaco" style="visibility:hidden">.</div>
<ul>
<li> <a href="#" class="cidade" onclick="MM_showHideLayers('div0','','hide');MM_showHideLayers('cid4','','show')">Belo Horizonte (BH) <br />
<b>02/07</b></a> </li>
</ul>
</div>
<div id="div1">
<ul>
<li id="cid1"><a href="#" onclick="MM_showHideLayers('div0','','show','cid1','','hide')">Porto Alegre (RS) Local: Hotel Sheraton<br />
Horário: 22 horas</a></li>
</ul>
<div id="espaco" style="visibility:hidden">.</div>
<ul>
<li id="cid2"><a href="#" onmouseout="MM_showHideLayers('div0','','show','cid2','','hide')">Rio de Janeiro (RJ) Local: Praia de Copacabana<br />
Horário: 22 horas</a></li>
</ul>
<div id="espaco" style="visibility:hidden">.</div>
<ul>
<li id="cid3"><a href="#" onmouseout="MM_showHideLayers('div0','','show','cid3','','hide')">São Paulo (SP) Local: Hotel da Glória<br />
Horário: 22 horas</a></li>
</ul>
<div id="espaco" style="visibility:hidden">.</div>
<ul>
<li id="cid4"><a href="#" onmouseout="MM_showHideLayers('div0','','show','cid4','','hide')">Belo Horizonte (BH) Local: Centro de Convenções<br />
Horário: 22 horas</a></li>
</ul>
</div>
</div>
</body>
</html>
CSS
@charset "utf-8";
/* CSS Document */
html, body {
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
#mask {
width:97%;
top:66%;
left:3%;
position: absolute;
z-index:2;
float:left;
height: 34%;
overflow: auto;
z-index:8;
}
#div0 {
list-style: none;
list-style-type: none;
width:50%;
top:0%;
left:0%;
position: absolute;
z-index:10;
float:left;
padding: 2% 0px 0px 2%;
text-decoration: none;
}
.cidade {
height: 96px;
z-index:11;
list-style: none;
list-style-type: none;
overflow: hidden;
list-style-type: none;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 16px;
font-weight: bold;
color: #FFFFFF;
text-decoration: none;
}
.cidade li {
list-style-type: none;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 16px;
font-weight: bold;
color: #FFFFFF;
text-decoration: none;
height: 96px;
}
.cidade ul {
list-style-type: none;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 16px;
font-weight: bold;
color: #FFFFFF;
text-decoration: none;
height: 96px;
}
.cidade a {
list-style-type: none;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 26px;
font-weight: bold;
color: #FFFFFF;
text-decoration: none;
height: 96px;
}
ul li a b
{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
color: #009999;
text-decoration: none;
line-height: 20px;
z-index:12;
}
#espaco {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
color: #009999;
text-decoration: none;
line-height: 20px;
visibility: hidden;
z-index:14;
}
#div1 {
list-style: none;
list-style-type: none;
z-index:51;
float:left;
padding: 2% 0px 0px 2%;
text-decoration: none;
}
#cid1 {
list-style-type: none;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 16px;
font-weight: bold;
color: #FFFFFF;
text-decoration: none;
visibility: hidden;
line-height: 20px;
margin-top: -2px;
background-image:url(bg1.png);
background-repeat: no-repeat;
}
#cid2, #cid3, #cid4 {
list-style-type: none;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 16px;
font-weight: bold;
color: #FFFFFF;
text-decoration: none;
visibility: hidden;
line-height: 20px;
margin-top: -4px;
background-image:url(bg1.png);
background-repeat: no-repeat;
}
#cid1 a:link, #cid2 a:link, #cid3 a:link, #cid4 a:link {
list-style-type: none;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 16px;
font-weight: bold;
color: #FFFFFF;
text-decoration: none;
line-height: 20px;
background-image:url(bg1.png);
background-repeat: no-repeat;
height: 96px;
}
#cid1 a:visited, #cid2 a:visited, #cid3 a:visited, #cid4 a:visited {
list-style-type: none;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 16px;
font-weight: bold;
color: #FFFFFF;
text-decoration: none;
line-height: 20px;
background-image:url(bg1.png);
background-repeat: no-repeat;
height: 96px;
}
.hover {
background-image:url(bg1.png);
background-repeat: no-repeat;
height: 96px;
z-index:80;
}
Peço desculpas se cometi muitos erros, estou realmente penando pra fazer isso e CSS não é meu forte.
