show hide

Olá pessoal, tudo bem??

Estou engatinhando na montagem de uma tela aqui, vou tentar explicar:

Preciso q ao clicar sobre um evento (Rio de Janeiro), seja exibido os detalhes do mesmo e ao tirar o mouse de cima, os detalhes somem. Respectivamente ao clicar sobre o evento São Paulo, carregue o evento correspondente.

Rio de Janeiro (RJ)

Dia 02/08

Mostrar 02/08 - Rio de Janeiro - Hotel X, às 14 horas.

São Paulo (SP)

Dia 04/08

Eis meu html:

<div id="evento">
<span class="cidade">Rio de Janeiro (RJ)</span>
<span class="data">
02/08</span>

<span class="cidade">São Paulo (SP)</span>
<span class="data">
04/08 </span>

</div>

CSS

#evento {

padding-top:1%;
}

.cidade {
font-family: "Courier New", Courier, monospace;
font-size: 16px;
font-weight: bold;
height:27px;
color: #FFFFFF;
text-decoration: none;
padding-top: 6px;
float: left;

}

.data {
font-family: "Courier New", Courier, monospace;
font-size: 14px;
height:20px;
color: #000;
text-decoration: none;
padding-top: 0px;
padding-bottom: 10px;
float: left;

}

Vcs poderia, por favor, me ajudar??

Desde já obrigada!!