Efeito ao passar o mouse

Minha questão:

Como eu faço este efeito ? [Tens de ter uma conta e sessão iniciada para poderes visualizar este link]

Veja que ao passar o mouse sobre as categorias, ele "destaca" com linhas diagonais.. acho

Abraços

---

Endereço do meu fórum:
[Tens de ter uma conta e sessão iniciada para poderes visualizar este link]

Versão:
PunBB

Adicione ao CSS:

Código:

.main-content > tr:hover{
background-color: #A4D7F2;
background-image: url('http://i15.servimg.com/u/f15/14/55/36/34/foruml10.gif');
}

Resulta?

DeeW. escreveu:Adicione ao CSS:

Código:

.main-content > tr:hover{
background-color: #A4D7F2;
background-image: url('http://i15.servimg.com/u/f15/14/55/36/34/foruml10.gif');
}

Resulta?

Não.

Olá,

Na verdade o código do nosso amigo Deew funciona sim.. Só precisa de alguns ajustes..

Veja bem não podemos usar o seletor direct child porque o tr não é filho direto do main-content, melhor filtrar ele...

E também o hover não terá efeito pois os TD da tabela tem cor.. É necessário tirar essa cor.

Veja:

Código:

.pun table.table tr:hover{
  background-image: url('http://i15.servimg.com/u/f15/14/55/36/34/foruml10.gif');
}
.pun table.table td{
  background: transparent;
}

Abraços...

Wagner escreveu:Olá,

Na verdade o código do nosso amigo Deew funciona sim.. Só precisa de alguns ajustes..

Veja bem não podemos usar o seletor direct child porque o tr não é filho direto do main-content, melhor filtrar ele...

E também o hover não terá efeito pois os TD da tabela tem cor.. É necessário tirar essa cor.

Veja:

Código:

.pun table.table tr:hover{
  background-image: url('http://i15.servimg.com/u/f15/14/55/36/34/foruml10.gif');
}
.pun table.table td{
  background: transparent;
}

Abraços...

Funcionou Wagner, mas aonde marca os Tópicos e Respostas, fica Branco. pode dar uma olhada?

Na verdade eu já tinha fiz um outro tópico com esta duvida, eu queria que o topicos e resposta ficasse igual ao do BS.
Uma o lado do outro.. mas ninguem conseguiu resolver..
ABraços

Olá,

Troque o CSS que passei por esse..

Código:

.pun table.table tr:hover{
  background-image: url('http://i15.servimg.com/u/f15/14/55/36/34/foruml10.gif');
}
.pun table.table td, .pun .main table td.tc2, .pun .main table td.tc3{
  background: transparent;
}

E sobre o efeito fiz aqui rapidão só para você testar, não tenho acesso aos templates da BS mas creio que seja assim... Faça os testes

Código:

            <th class="tc2">
                    <span class="stats_number">{topics_list_box.row.L_REPLIES}</span>
                    <span class="stats_text">tópicos</span>
                </th>

Código:

.stats_text {
color: #d1d1d1;
display: block;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
text-align: center;
text-transform: uppercase;
}
.stats_number {
color: #BBB;
display: block;
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
font-weight: 700;
overflow: hidden;
position: relative;
text-align: center;
}

este código vai no CSS também?

Código:

[size=11]<th class="tc2">[/size]


[size=11]                    <span class="stats_number">{topics_list_box.row.L_REPLIES}</span>[/size]


[size=11]                    <span class="stats_text">tópicos</span>[/size]


[size=11]                </th>[/size]

Não, isso ai é só uma base, vai la nos seus templates... Se não me engano é no template topics_list_box mas como falei não testei o efeito, joguei meio por cima..

É só procurar lá por tc2 que ja vai entender...

Até mais!

Wagner escreveu:Não, isso ai é só uma base, vai la nos seus templates... Se não me engano é no template topics_list_box mas como falei não testei o efeito, joguei meio por cima..

É só procurar lá por tc2 que ja vai entender...

Até mais!

Eu nem vou tentar por enquanto, mexer nesta parte....
Talvez final de Semana, dai eu aviso aqui se der certo.. Obrigado por enquanto.