Categorias hover imagem
3 participantes
Fórum dos Fóruns :: Ajuda e atendimento ao utilizador :: Questões sobre códigos :: Questões resolvidas sobre HTML e BBCode
Página 1 de 1 • Compartilhe
Categorias hover imagem
- 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 diversos | Tags: | Categorias,hover,imagem |
Re: Categorias hover imagem
Olá,
Troque o código por este:
Cordialmente.
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
Re: Categorias hover imagem
Amigo isso apenas arredonda as bordas em quero que aumente a área que está sem hover
Re: Categorias hover imagem
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:
Até mais.
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.
Re: Categorias hover imagem
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?
Re: Categorias hover imagem
Olá, use esse código:
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
- 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
Re: Categorias hover imagem
é 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?
Re: Categorias hover imagem
Sim! Use esse código:
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
- 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
Re: Categorias hover imagem
E o símbolo que diz UG, para ver novas mensagens e isso tambem tem como colocar a frente?
Re: Categorias hover imagem
Sim, também sim! Use esse código:
A parte:
span.status.clearfix {
z-index: 5;
}
Vai fazer o símbolo ficar acima.
Qualquer dúvida, to aqui pra isso!!!
- 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!!!
Re: Categorias hover imagem
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?
Re: Categorias hover imagem
Olá, creio que com CSS não seja possível.
Re: Categorias hover imagem
hum, ok e por último tem como retirar as bordas que estão no início?
Re: Categorias hover imagem
Está se referindo as linhas formando um quadrado onde devia estar a imagem? Se for, acho que não é possível.
Re: Categorias hover imagem
s: obrigado
Tópicos semelhantes
» Hover nas categorias
» Efeito hover nas categorias
» Efeito hover nas categorias?
» Efeito hover nas categorias
» Efeito hover nas categorias
» Efeito hover nas categorias
» Efeito hover nas categorias?
» Efeito hover nas categorias
» Efeito hover nas categorias
Fórum dos Fóruns :: Ajuda e atendimento ao utilizador :: Questões sobre códigos :: Questões resolvidas sobre HTML e BBCode
Página 1 de 1
Permissões neste sub-fórum
Não podes responder a tópicos