Categorias hover imagem

Ver o tópico anterior Ver o tópico seguinte Ir em baixo

Resolvido Categorias hover imagem

Mensagem por Lima 3005 em 09/06/14, 11:41 am

  • Descrição:
Código:
<div style="clear: both; text-align: right;" class="cat2">
<a style="margin-left: 1em; margin-right: 1em;" imageanchor="1"><img style="width: 400px; height: 10px;" border="0" /></a>
</div>
<style type="text/css">
div.cat2 img:hover {
background-image: url("http://img.webme.com/pic/m/metin2-thereddragon/metin2banner1.jpg");
background-repeat:no-repeat;
padding-top: 20px;
height: 20px;
width: 400px;
position: absolute;
left: 120px;
top: 8px;
}
a[href="/f9-virtual-dj"] {
top: 15px;
position: relative;
}
</style>

Na descrição do fórum coloco esse código, mas tem forma de aumentar a área do retângulo do hover sem que aumente as categorias, ou seja, se vocês forem ao meu forum na parte do virtual DJ irão ver uma borda queria aumentar essa borda sem aumentar as categorias

É aqui que modifico mas ao aumentar a altura aumenta a categoria também

Código:
<div style="clear: both; text-align: right;" class="cat2">
<a style="margin-left: 1em; margin-right: 1em;" imageanchor="1"><img style="width: 400px; height: 10px;" border="0" /></a>
</div>

  • Informações:
Fórum:http://universogamer.foruns.com.pt/Versão:INVISION
Tipo:Erros diversosTags:Categorias,hover,imagem

avatar

Lima 3005
Usuário destaque

Masculino
Inscrito dia : 08/02/2013
Mensagens : 631
Pontos Ativos : 880

Ver perfil do usuário http://universogamer.foruns.com.pt

Resolvido Re: Categorias hover imagem

Mensagem por Convidado em 09/06/14, 01:40 pm

Olá,

Troque o código por este:
Código:
<div style="clear: both; text-align: right;" class="cat2">
<a style="margin-left: 1em; margin-right: 1em;" imageanchor="1"><img style="width: 400px; height: 10px;" border="0" /></a>
</div>
<style type="text/css">
div.cat2 img:hover {
background-image: url("http://img.webme.com/pic/m/metin2-thereddragon/metin2banner1.jpg");
background-repeat:no-repeat;
padding-top: 20px;
height: 20px;
width: 400px;
position: absolute;
left: 120px;
top: 8px;
-moz-border-radius:10px;
-webkit-border-radius: 10px;
}
a[href="/f9-virtual-dj"] {
top: 15px;
position: relative;
}
</style>

Cordialmente.

Convidado
Convidado


Resolvido Re: Categorias hover imagem

Mensagem por Lima 3005 em 09/06/14, 02:24 pm

Amigo isso apenas arredonda as bordas em quero que aumente a área que está sem hover
avatar

Lima 3005
Usuário destaque

Masculino
Inscrito dia : 08/02/2013
Mensagens : 631
Pontos Ativos : 880

Ver perfil do usuário http://universogamer.foruns.com.pt

Resolvido Re: Categorias hover imagem

Mensagem por Sennior em 09/06/14, 03:18 pm

Saudações meu amigo,

Não compreendi bem, mas o que parece que o senhor quer que a imagem apareça assim que o Hover é acionado, se for isso troque o código da categoria pelo abaixo:
Código:
<div style=" text-align: right;" class="cat2">
<a style="margin-left: 1em; margin-right: 1em;" imageanchor="1"><div class="sennior"><img style="width: 400px; height: 20px;" border="0" /></div></a>
</div>
<style type="text/css">
div.cat2 img:hover {
background-image: url("http://img.webme.com/pic/m/metin2-thereddragon/metin2banner1.jpg");
background-repeat: no-repeat;
padding-top: 20px;
height: 66px !important;
width: 400px!important;
position: absolute;
left: 37pc;
top: 61pc;
}
a[href="/f9-virtual-dj"] {
top: 15px;
position: relative;
}
</style>

Até mais.
avatar

Sennior
Membro profissional
Membro profissional

Masculino
Inscrito dia : 10/06/2011
Mensagens : 16302
Pontos Ativos : 20791

Ver perfil do usuário http://ajuda.forumeiros.com/forum https://www.facebook.com/GlladstonHenrique

Resolvido Re: Categorias hover imagem

Mensagem por Lima 3005 em 09/06/14, 03:36 pm

Amigo repare que se você for até á categoria do virtualDj verá lá uma borda eu quero aumentar essa borda para toda a categoria virtual dj para ter hover em toda a parte sempre que passar na categoria aparecerá a imagem, percebeu?
avatar

Lima 3005
Usuário destaque

Masculino
Inscrito dia : 08/02/2013
Mensagens : 631
Pontos Ativos : 880

Ver perfil do usuário http://universogamer.foruns.com.pt

Resolvido Re: Categorias hover imagem

Mensagem por Superbomber em 09/06/14, 03:56 pm

Olá, use esse código:

Código:

<div style="clear: both; text-align: right;" class="cat2">
<a style="margin-left: 1em; margin-right: 1em;" imageanchor="1"><img style="width: 400px; height: 10px;" border="0" /></a>
</div>
<style type="text/css">
div.cat2 {
  max-width: 400px;
  max-height: 10px;
}
div.cat2 img:hover {
background-image: url("http://img.webme.com/pic/m/metin2-thereddragon/metin2banner1.jpg");
background-repeat:no-repeat;
padding-top: 20px;
height: 20px;
width: 400px;
position: absolute;
left: 120px;
top: 8px;
}
a[href="/f9-virtual-dj"] {
top: 15px;
position: relative;
}
</style>

Deixe a parte:

div.cat2 {
 max-width: 400px;
 max-height: 10px;
}


E a "borda", você pode mudar o tamanho e a posição a vontade que a categoria vai ficar sem ser editada.

Até mais

Superbomber
Nível 9

Masculino
Inscrito dia : 28/04/2014
Mensagens : 238
Pontos Ativos : 328

Ver perfil do usuário http://hackerjustice.forumeiros.com/

Resolvido Re: Categorias hover imagem

Mensagem por Lima 3005 em 09/06/14, 04:08 pm

é isso mesmo, mas tem como se eu colocar a borda na categoria toda não interferir com o nome do fórum exemplo "Virtual DJ" é que assim não consigo ir para essa parte do fórum, temo como?
avatar

Lima 3005
Usuário destaque

Masculino
Inscrito dia : 08/02/2013
Mensagens : 631
Pontos Ativos : 880

Ver perfil do usuário http://universogamer.foruns.com.pt

Resolvido Re: Categorias hover imagem

Mensagem por Superbomber em 09/06/14, 04:13 pm

Sim! Use esse código:

Código:

<div style="clear: both; text-align: right;" class="cat2">
<a style="margin-left: 1em; margin-right: 1em;" imageanchor="1"><img style="width: 400px; height: 10px;" border="0" /></a>
</div>
<style type="text/css">
div.cat2 {
  max-width: 400px;
  max-height: 10px;
}
a.forumtitle {
  z-index: 5;
}
div.cat2 img:hover {
background-image: url("http://img.webme.com/pic/m/metin2-thereddragon/metin2banner1.jpg");
background-repeat:no-repeat;
padding-top: 20px;
height: 20px;
width: 400px;
position: absolute;
left: 120px;
top: 8px;
}
a[href="/f9-virtual-dj"] {
top: 15px;
position: relative;
}
</style>

A parte:

a.forumtitle {
z-index: 5;
}


Vai fazer com que o link fique acima da imagem. Eai depois você ajeita a borda como deseja.
Até a próxima. :D

Superbomber
Nível 9

Masculino
Inscrito dia : 28/04/2014
Mensagens : 238
Pontos Ativos : 328

Ver perfil do usuário http://hackerjustice.forumeiros.com/

Resolvido Re: Categorias hover imagem

Mensagem por Lima 3005 em 09/06/14, 04:22 pm

E o símbolo que diz UG, para ver novas mensagens e isso tambem tem como colocar a frente?
avatar

Lima 3005
Usuário destaque

Masculino
Inscrito dia : 08/02/2013
Mensagens : 631
Pontos Ativos : 880

Ver perfil do usuário http://universogamer.foruns.com.pt

Resolvido Re: Categorias hover imagem

Mensagem por Superbomber em 09/06/14, 04:25 pm

Sim, também sim! Use esse código:

Código:

<div style="clear: both; text-align: right;" class="cat2">
<a style="margin-left: 1em; margin-right: 1em;" imageanchor="1"><img style="width: 400px; height: 10px;" border="0" /></a>
</div>
<style type="text/css">
div.cat2 {
  max-width: 400px;
  max-height: 10px;
}
a.forumtitle {
  z-index: 5;
}
span.status.clearfix {
  z-index: 5;
}
div.cat2 img:hover {
background-image: url("http://img.webme.com/pic/m/metin2-thereddragon/metin2banner1.jpg");
background-repeat:no-repeat;
padding-top: 20px;
height: 20px;
width: 400px;
position: absolute;
left: 120px;
top: 8px;
}
a[href="/f9-virtual-dj"] {
top: 15px;
position: relative;
}
</style>

A parte:
span.status.clearfix {
z-index: 5;
}


Vai fazer o símbolo ficar acima.

Qualquer dúvida, to aqui pra isso!!!

Superbomber
Nível 9

Masculino
Inscrito dia : 28/04/2014
Mensagens : 238
Pontos Ativos : 328

Ver perfil do usuário http://hackerjustice.forumeiros.com/

Resolvido Re: Categorias hover imagem

Mensagem por Lima 3005 em 09/06/14, 04:39 pm

Obrigado xD e tem como se tiver o hover da imagem e passar em cima do nome do fórum "virtual dj" continuar a imagem?
avatar

Lima 3005
Usuário destaque

Masculino
Inscrito dia : 08/02/2013
Mensagens : 631
Pontos Ativos : 880

Ver perfil do usuário http://universogamer.foruns.com.pt

Resolvido Re: Categorias hover imagem

Mensagem por Superbomber em 09/06/14, 04:54 pm

Olá, creio que com CSS não seja possível.

Superbomber
Nível 9

Masculino
Inscrito dia : 28/04/2014
Mensagens : 238
Pontos Ativos : 328

Ver perfil do usuário http://hackerjustice.forumeiros.com/

Resolvido Re: Categorias hover imagem

Mensagem por Lima 3005 em 09/06/14, 04:58 pm

hum, ok e por último tem como retirar as bordas que estão no início?
avatar

Lima 3005
Usuário destaque

Masculino
Inscrito dia : 08/02/2013
Mensagens : 631
Pontos Ativos : 880

Ver perfil do usuário http://universogamer.foruns.com.pt

Resolvido Re: Categorias hover imagem

Mensagem por Superbomber em 09/06/14, 05:18 pm

Está se referindo as linhas formando um quadrado onde devia estar a imagem? Se for, acho que não é possível.

Superbomber
Nível 9

Masculino
Inscrito dia : 28/04/2014
Mensagens : 238
Pontos Ativos : 328

Ver perfil do usuário http://hackerjustice.forumeiros.com/

Resolvido Re: Categorias hover imagem

Mensagem por Lima 3005 em 09/06/14, 05:28 pm

s: obrigado
avatar

Lima 3005
Usuário destaque

Masculino
Inscrito dia : 08/02/2013
Mensagens : 631
Pontos Ativos : 880

Ver perfil do usuário http://universogamer.foruns.com.pt

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo

- Tópicos similares

Permissão deste fórum:
Você não pode responder aos tópicos neste fórum