Efeito hover nos sub fóruns
+6
Consolado
Firenando
Roevs
Oto!
Ace
killerplay
10 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 2
Página 1 de 2 • 1, 2
Efeito hover nos sub fóruns
Relembrando a primeira mensagem :
Qual é minha questão:
Gostaria de Saber como faz o Efeito Hover nos Sub Foruns igual o do www.narutorpgakatsuki.com
Ele está invisivel ai quando coloca o mouse por cima eles aparecem!
Imagem sem o Mouse > https://2img.net/h/oi49.tinypic.com/xepqxc.png
Imagem com o MOuse > https://2img.net/h/oi50.tinypic.com/vxmekn.png
a Versao do Meu FOrum e PunBB
Endereço do meu fórum:
https://ajuda.forumeiros.com
Versão do fórum:
PHPBB3
Qual é minha questão:
Gostaria de Saber como faz o Efeito Hover nos Sub Foruns igual o do www.narutorpgakatsuki.com
Ele está invisivel ai quando coloca o mouse por cima eles aparecem!
Imagem sem o Mouse > https://2img.net/h/oi49.tinypic.com/xepqxc.png
Imagem com o MOuse > https://2img.net/h/oi50.tinypic.com/vxmekn.png
a Versao do Meu FOrum e PunBB
Endereço do meu fórum:
https://ajuda.forumeiros.com
Versão do fórum:
PHPBB3
Última edição por killerplay em 13.02.13 15:10, editado 2 vez(es)
Re: Efeito hover nos sub fóruns
Adicione este código ao seu css.
Até mais
- Código:
td.tc1 .descri a {
display: none;
}
td.tc1 .descri:hover a {
display: block !important;
}
Até mais
Re: Efeito hover nos sub fóruns
Troque por este.
- Código:
td.tc1 .descri a {
display: none;
position: relative;
}
td.tc1 .descri:hover a {
display: block;
position: relative;
}
Re: Efeito hover nos sub fóruns
Troque por este.
- Código:
td.tc1 .descri a {
display: none;
position: relative;
}
td.tc1:hover .descri a {
display: block;
position: relative;
}
Re: Efeito hover nos sub fóruns
Olá, desculpe, foi apenas um erro de digitação...
- Código:
td.tcl .descri a {
display: none;
}
td.tcl .descri:hover a {
display: block;
}
Re: Efeito hover nos sub fóruns
Troque por este.
- Código:
td.tcl .descri a {
display: none;
position: relative;
}
td.tcl .descri:hover a {
display: block;
position: relative;
}
h3.hierarchy {
display: block !important;
}
Re: Efeito hover nos sub fóruns
Olá, no seu CSS eu sempre encontro esse código, e você não coloca o outro.
Apague e coloque o que eu citei acima por favor.
- Código:
td.tc1 .descri a {
display: none;
position: relative;
}
td.tc1:hover .descri a {
display: block;
position: relative;
}
Apague e coloque o que eu citei acima por favor.
Re: Efeito hover nos sub fóruns
Não dá!
Troco e não resulta!
Olha meu CSS
Troco e não resulta!
Olha meu CSS
- Código:
/*menu-banner*/
#pun-intro #pun-desc,#pun-intro strong{text-shadow:0px 0px 5px #666;color:#ededed}
#pun-intro a{text-decoration:none}#pun-intro a:hover{color:#666}
#pun-intro{text-align: center;}
/*header-login*/.hlogin,.hlogin a:link,.hlogin a:visited{
font-family:Arial,Geneva,Helvetica,Verdana,sans-serif;color:#666;text-decoration:none}
.hlogin{font-size:13px;float:right;text-align:left;margin:0 20px 0 0;padding:0 0 0 10px;
height:31px;vertical-align:middle;white-space:nowrap;border:1px solid #c4c4c4;
background-color:#ffffff;
background-image:linear-gradient(#ffffff,#f2f2f2);
background:-moz-linear-gradient(#ffffff,#f2f2f2);
background-image:-webkit-linear-gradient(#ffffff,#f2f2f2);
border-radius:0 0 7px 7px;-moz-border-radius:0 0 7px 7px;-webkit-border-radius:0 0 7px 7px;
box-shadow:0px 0px 8px 0px #353535;-moz-box-shadow:0px 0px 8px 0px #353535;-webkit-box-shadow:0px 0px 8px 0px #353535}
.hlogin #header{height:26px;padding:5px 20px 0 10px;vertical-align:middle}
/*links*/
a.a{background: url(http://i42.servimg.com/u/f42/17/32/13/00/puce_f10.png) no-repeat 0px 4px;
font-family:Arial,Helvetica,sans-serif;font-size:12px;padding-left:15px}
/*links footer*/
#pun-foot a{color: #666 !important;text-decoration: none;}
#pun-foot a:hover {color: #666 !important;text-shadow: 0px 0px 8px #CCB07E;}
#pun-foot a:active {color: #666 !important;text-shadow: 0px 0px 8px #000;}
/*Botões do tópico*/
#main-content a.cgu-buttons, button.button2, input.button1, input.button2 {
background: #F4F5F4 url(http://i66.servimg.com/u/f66/11/96/49/61/tabbg10.png);
border: 1px solid #DDD;
border-radius: ;
padding: 3px 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border: 1px solid #F4F5F4;}
/*Sombra avatar*/
.post span.postdetails a img:first-child,.postprofile dl dt a img:first-child,.post div.user-ident div.user-basic-info a img:first-child,dl.postdetails dl a img:first-child{
-moz-box-shadow:1px 1px 5px #9C9C9C;
-webkit-box-shadow:1px 1px 5px #9C9C9C;
box-shadow:1px 1px 5px #9C9C9C;}
/*Widgets*/
.module .main-head {
background: #600 url(http://i.imgur.com/8USLg.jpg) repeat-x;
text-shadow: rgba(0, 0, 0, 0.5) 0px -1px 0px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: inset black 0px 1px 3px;
-moz-box-shadow: inset #000 0px 1px 3px;
box-shadow: inset black 0px 1px 3px;
margin-top: 8px;
border-bottom: 0px;
text-align: center;}
/*menu e logo*/
pun-navlinks {padding-top: 12px !important;}
.module {
background-color: #FFFFFF !important;
}
.descri {
background-color: white !important;
padding: 5px !important;
font-family: Times New Roman;
text-align: top justify;
}
.descri {
background-color: #F7F4F4;
-moz-border-radius-topleft: 15px;
-moz-border-radius-bottomleft: 15px;
-moz-border-radius-bottomright: 15px;
-moz-border-radius-topright: 15px;
-webkit-border-radius: 15px;
-htm-border-radius: 15px;
margin-left: 10px;
margin-right: 10px;
margin-top: 10px;
margin-bottom: 10px;
font-weight: none;
padding-top: 5px;
-moz-box-shadow: 1px 1px 2px #cbcaca, -1px -1px 2px #cbcaca;
-webkit-box-shadow: 1px 1px 2px #cbcaca, -1px -1px 2px #cbcaca;
text-align: center;
height: 100px;
}
.descri {
background-color: white !important;
padding: 5px !important;
font-family: Times New Roman;
text-align: top justify;
}
.descri {
background-color: #F7F4F4;
-moz-border-radius-topleft: 15px;
-moz-border-radius-bottomleft: 15px;
-moz-border-radius-bottomright: 15px;
-moz-border-radius-topright: 15px;
-webkit-border-radius: 15px;
-htm-border-radius: 15px;
margin-left: 10px;
margin-right: 10px;
margin-top: 10px;
margin-bottom: 10px;
font-weight: none;
padding-top: 5px;
-moz-box-shadow: 1px 1px 2px #cbcaca, -1px -1px 2px #cbcaca;
-webkit-box-shadow: 1px 1px 2px #cbcaca, -1px -1px 2px #cbcaca;
text-align: center;
height: 100px;
}
/*tabelas categoria*/
#last-post {
background-color: #F7F4F4;
-moz-border-radius-topleft: 15px;
-moz-border-radius-bottomleft: 15px;
-moz-border-radius-bottomright: 15px;
-moz-border-radius-topright: 15px;
-webkit-border-radius: 15px;
-html-border-radius: 15px;
margin-left: 10px;
margin-top: 10px;
margin-bottom: 10px;
margin-right: 15px;
font-weight: none;
padding-top: 5px;
padding: 7px;
-moz-box-shadow: 1px 1px 2px #cbcaca, -1px -1px 2px #cbcaca;
-webkit-box-shadow: 1px 1px 2px #cbcaca, -1px -1px 2px #cbcaca;
text-align: top justify;
height: 97px;
color: gray !important;
margin-top: 10px;
margin-bottom: 10px;
font-weight: none;
padding-top: 5px;
-moz-box-shadow: 1px 1px 2px #cbcaca, -1px -1px 2px #cbcaca;
-webkit-box-shadow: 1px 1px 2px #cbcaca, -1px -1px 2px #cbcaca;
text-align: center;
height: 100px;
}
#last-post {
background-color: #F7F4F4;
-moz-border-radius-topleft: 15px;
-moz-border-radius-bottomleft: 15px;
-moz-border-radius-bottomright: 15px;
-moz-border-radius-topright: 15px;
-webkit-border-radius: 15px;
-html-border-radius: 15px;
margin-left: 10px;
margin-top: 10px;
margin-bottom: 10px;
font-weight: none;
padding-top: 5px;
padding: 7px;
-moz-box-shadow: 1px 1px 2px #cbcaca, -1px -1px 2px #cbcaca;
-webkit-box-shadow: 1px 1px 2px #cbcaca, -1px -1px 2px #cbcaca;
text-align: top justify;
height: 97px;
color: gray !important; }
a.lienssousfo {
font-size: 28px;
font-family: Times New Roman;
text-shadow: white 1px 1px 2px;
font-stretch: ultra-condensed;
letter-spacing: -2px;
opacity: 0.7px;
text-align: right;
text-decoration: none;
font-weight: bold;
font-style: italic;
text-transform: lowercase;
display: inline-block;
}
ul.topiclist {
background: url(http://img594.imageshack.us/img594/7413/categl.png) 50% 100% no-repeat scroll transparent!important;
}
#onlinelist {
border-top: 0px transparent;
padding: 0.6em 1em;
}
#board-stats span{
background-color:transparent;
color:#4A4A4A;
font-weight:700;
padding:2px 6px
}
#board-stats{
background:#f5f5f5;
border-left: 1px solid #eaeaea;
border-left-color-ltr-source:physical;
border-left-color-rtl-source:physical;
border-left-color-value:#DEDEDE;
border-left-style-ltr-source:physical;
border-left-style-rtl-source:physical;
border-left-style-value:solid;
border-left-width-ltr-source:physical;
border-left-width-rtl-source:physical;
border-left-width-value:0;
float:right;padding-left:20px;
margin-top:-7px;
width:38%
}
#board-stats dl{margin-top:10px}#board-stats dd,#board-stats dt{
border-top-color:#DEDEDE;
border-top-style:solid;
border-top-width:1px;
float:left;
font-size:.85em;padding:6px 2px;
width:45%}
#board-stats dt{
color: #595959;
font: normal 10px tahoma, arial, verdana, sans-serif;
clear:both;
font-weight:700
}
#board-stats h2{
padding-top:10px;
font-size: 1.1em;
font-weight: bold;
clear:both;
font-weight:700
}
.maintitle {
background: #F8F8F8 url(http://www.ggames.com.br/forum/public/style_images/baisik/gradient_bg.png) repeat-x left 50%;
color: #B4453B;
text-shadow: white 0px 1px 0px;
font-size: 14px;
line-height: 20px;
font-weight: bold;
border-radius: 5px 5px 0 0;
-moz-border-radius: 5px 5px 0 0;
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
padding: 11px !important;
margin: 0 !important;
overflow: hidden;
border-bottom: 1px solid #EAEAEA;
}
h3.maintitle{
color: #B4453B;
text-shadow: white 0px 1px 0px;
line-height: 20px;
font-weight: bold;
display: block;
font-size: 1.17em;
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
font-weight: bold;
}
#estadisticas{
background: #ffffff;
border:1px solid #d9d9d9;
padding-top: 0px;
padding-bottom: 0px;
padding-right: 8px;
padding-left: 8px;
border-radius:7px;
}
#Legend {
border-top: 1px solid #EAEAEA;
padding-top:10px;
font-size: 1.1em;
font-weight: bold;
clear:both;
font-weight:700;
padding-bottom:5px
}
::-webkit-scrollbar-track-piece{background: #c2c2c2}
::-webkit-scrollbar-thumb:vertical{background:#F70A31;border-radius: 1px}
::-webkit-scrollbar-corner{background: #ebebeb}
::-webkit-scrollbar{-webkit-border-radius: 1ex; background: #FFFFFF; height: 13px; width: 13px}
::-webkit-scrollbar-thumb{-webkit-border-radius: 2px; -webkit-box-shadow: 0 2px 3px rgba(0,0,0,0.30); background: #F70A31}
#pun-intro a img{transition-duration: 0.5s; -moz-transition-duration: 0.5s; -webkit-transition-duration: 0.5s; -o-transition-duration: 0.5s; -webkit-transform: rotate(0deg) scale(0.9) skew(1deg) translate(0px); -moz-transform: rotate(0deg) scale(0.9) skew(1deg) translate(0px); -o-transform: rotate(0deg) scale(0.9) skew(1deg) translate(0px); -moz-opacity: 0.6; opacity: 0.6; filter:alpha(opacity=40); -moz-transition-duration: 0.8s; -webkit-transition-duration: 0.8s; -o-transition-duration: 0.8s}#pun-intro a img:hover{ transition-duration: 1.0s; -moz-transition-duration: 0.5s; -webkit-transition-duration: 1.0s; -o-transition-duration: 1.0s; -webkit-transform: rotate(0deg) scale(1.0) skew(1deg) translate(0px); -moz-transform: rotate(0deg) scale(1.0) skew(1deg) translate(0px); -o-transform: rotate(0deg) scale(1.0) skew(1deg) translate(0px); -moz-opacity: 0.6; opacity: 1.0; filter:alpha(opacity=40)}
h4.username{margin-left:53px}.user-ident{text-align:center}
#wrap{padding-top:42px}#page-header .navbar{position:fixed;top:0px;left:0px;width:100%}
.estatis-1{height:136px;position:absolute;width:390px}
.estatis-3{margin-top: 190px; margin-left: 29%!important}
.estatis-1{margin-top: 40px; margin-left: 355px!important}
.title-esta{color:#d62020;font-size:23px!important;font-weight:700!important;margin-top:-10px;padding-bottom:10px;text-shadow:1px 2px 1px #000}
.estatis-1,.estatis-3{background:#F1F1F1;border-left:10px solid #C82626;border-radius:0 10px 10px 0;box-shadow:1px 2px 5px #949494;float:left;margin:10px;padding:7px;}
.estatis-2{background:#F1F1F1;border-left:10px solid #C82626;border-radius:0 10px 10px 0;box-shadow:1px 2px 5px #949494;float:right;margin-top:10px;margin-right: 40px;padding:25px;width:290px}
.estatis-1{margin-left: 8px!important}
.estatis-3{margin-top: 80px; margin-left: 8px!important}.page-bottom{display:none!important}
.main .main-head {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border: 1px solid #000000;
}
.pun .table .tc2, .pun .table .tc3 {
display: none;
}
.postbody .user{
margin-bottom:1em;
overflow:visible;
}
.postbody .user .user-info span{display:table !important; float:left;}
.postbody .user .user-info {
width: 195px;
border: 1px solid red;
display: none;
top: 20px;
position: absolute;
background-color: #e0e0e0;
padding: 10px 8px 12px;
border-left: 1px solid red;
margin-left: 1em;
border-radius: 5px;
border-radius: 5px;
box-shadow: 2px 2px 2px #a8a180;
}
.user {
background-color: white;
border: 1px solid #BEBEBE;
border-radius: 0px 20px 20px 0px;
margin-left: -17em !Important;
}
.postbody .user:hover .user-info{
z-index: 9;
left: 100%;
display:block;
}
.postbody .user .user-info span {
color: #333;
font-weight: bold;
}
.page-title h2{
text-align:center!Important;
}
#pun-head #pun-navlinks {
background-color: #333;
border-color: #CCC;
padding: .5em 1.1em .6em;
}
...
.postbody img .user img .user-info img{
text-align:center;
float:center;
}
.post:hover .post-options {
-moz-transition: all .2s linear;
-o-transition: all .2s linear;
-webkit-transition: all .2s linear;
opacity: .5;
}
.post .post-options:hover {
-moz-transition: all .2s linear;
-o-transition: all .2s linear;
-webkit-transition: all .2s linear;
opacity: 1!important;
}
.post .post-options {
-moz-transition: all .2s linear;
-o-transition: all .2s linear;
-webkit-transition: all .2s linear;
opacity: 0;
}
.pun .post .user {
-moz-border-radius: 6px;
-moz-box-shadow: 2px 2px 2px #a8a180;
-webkit-border-radius: 6px;
-webkit-box-shadow: 2px 2px 2px #a8a180;
background-color: white;
border: 1px solid red;
border-radius: 6px;
box-shadow: 2px 2px 2px #a8a180;
}
.main-content thead {
display: none;
}
/* Caixa do Perfil*/
.pun .posthead {
background: #600 url(http://i.imgur.com/8USLg.jpg) repeat-x;
text-shadow: rgba(0, 0, 0, 0.5) 0px -1px 0px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: inset black 0px 1px 3px;
-moz-box-shadow: inset #000 0px 1px 3px;
box-shadow: inset black 0px 1px 3px;
padding: 0 10px;
height: 36px;
line-height: 36px;
margin-top: 8px;
border-bottom: 0px;
}
/* Visita*/
#pun-visit {
-moz-border-radius: 6px;
-moz-box-shadow: 2px 2px 2px #a8a180;
-webkit-border-radius: 6px;
-webkit-box-shadow: 2px 2px 2px #a8a180;
background-color: #FFFFFF;
border: 1px solid red;
border-radius: 6px;
box-shadow: 2px 2px 2px #a8a180;}
/*Caixa de Baixo*/
#pun-about {
-moz-border-radius: 6px;
-moz-box-shadow: 2px 2px 2px #a8a180;
-webkit-border-radius: 6px;
-webkit-box-shadow: 2px 2px 2px #a8a180;
background-color: #dedede;
border: 1px solid red;
border-radius: 6px;
box-shadow: 2px 2px 2px #a8a180;}
/*Menu*/
#pun-head #pun-navlinks {
background-color: #333;
border-color: #CCC;
padding: .5em 1.1em .6em;
}
#pun-navlinks {
background-image: -moz-linear-gradient(#313029, #58564A 10%, #313029);
background-image: -webkit-gradient(linear, 0% 0%, 0% 10% 100%, from(#313029), to(#58564A), to(#313029));
background-image: -webkit-linear-gradient(#313029, #58564A 10%, #313029);
background-image: -o-linear-gradient(#313029, #58564A 10%, #313029);
}
#pun-navlinks {
border-top: 5px solid #21C8FF!important;
height: 43px;
overflow: visible!important;
padding: 1px 10px!important;
}
#pun-navlinks li:hover {
-webkit-transition: all .2s linear;
background: url(http://i42.servimg.com/u/f42/17/32/13/00/menu-s14.png) no-repeat 30% top;
}
#pun-navlinks ul[class="clearfix"] {
border: 0!important;
padding-top: 4px;
width: 90%;
}
#pun-navlinks a, #pun-navlinks a:visited {
text-decoration: none;
}
#pun-navlinks li a {
color: #EDEDED;
font-family: Trebuchet MS,"Lucida Grande",Verdana,Helvetica,Arial,sans-serif;
font-size: 12px;
font-weight: 700;
margin: 0;
}
#pun-navlinks li a {
background: url() repeat-y center right;
color: white;
font-family: Arial,Helvetica,sans-serif!important;
font-size: 14px!important;
font-weight: 700;
margin: 0!important;
padding: 14px 7px 14px 0;
text-decoration: none!important;
}
#pun-navlinks li {
-moz-transition: all .2s linear;
-o-transition: all .2s linear;
-webkit-transition: all .2s linear;
background: url(http://i42.servimg.com/u/f42/17/32/13/00/menu-s14.png) no-repeat 30% -10px;
padding-top: 12px;
position: relative;
transition: all .2s linear;
}
#pun-navlinks li {
display: inline;
font-size: 1.15em;
}
.main-head .page-title h2 {
text-transform: uppercase;
font-weight: normal !important;
font-size: 13px !important;
font-family: Francois One!important;
text-shadow: 1px 1px 0px black;
}
.main .main-head {
background: #600 url(http://i.imgur.com/8USLg.jpg) repeat-x;
background-image: none;
color: white;
clear: both;
border: 1px solid black;
-moz-border-radius-topright: 3px;
-moz-border-radius-topleft: 3px;
-webkit-border-top-right-radius: 3px;
-webkit-border-top-left-radius: 3px;
border-top-right-radius: 3px;
border-top-left-radius: 3px;
}
td.tcl .descri a {
display: none;
position: relative;
}
td.tcl .descri:hover a {
display: block;
position: relative;
}
h3.hierarchy {
display: block !important;
}
Re: Efeito hover nos sub fóruns
Olá, não é problema do código, porque testei em meu fórum de testes e está funcionando. Deve ser o seu template.
Espere um membro da Staff lhe ajudar, porque o seu CSS ainda continua o mesmo pelo /css.forum.
Espere um membro da Staff lhe ajudar, porque o seu CSS ainda continua o mesmo pelo /css.forum.
Re: Efeito hover nos sub fóruns
Olá!
Painel de controle >> Visualização >> Templates >> Geral >> index_box >>
Procure pela variável "{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}" e troque por:
Painel de controle >> Visualização >> Imagens e Cores >> Cores >> Folha de estilos CSS >>
Cole o código e valide:
Painel de controle >> Visualização >> Templates >> Geral >> index_box >>
Procure pela variável "{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}" e troque por:
- Código:
<div class="sublinks">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</div>
Painel de controle >> Visualização >> Imagens e Cores >> Cores >> Folha de estilos CSS >>
Cole o código e valide:
- Código:
.sublinks{display:none}.table tbody.statused tr td.tcl:hover .sublinks{display:block}
Consolado- Hiper Membro
- Membro desde : 09/05/2011
Mensagens : 4243
Pontos : 6128
Re: Efeito hover nos sub fóruns
Funcionou!
Agora Quero Centralizar os Sub FOruns e também quero que o hover apareca mais suavemente entende!
Agora Quero Centralizar os Sub FOruns e também quero que o hover apareca mais suavemente entende!
Re: Efeito hover nos sub fóruns
Boa tarde,
Tente com esse código JS para fazer com que os subfóruns apareçam suavemente:
Além disso, remova isso do seu CSS:
Tente com esse código JS para fazer com que os subfóruns apareçam suavemente:
- Código:
jQuery(function() {
jQyery('.table tbody.statused tr td.tcl').over(function() {
jQuery(this).find('.sublinks').show('slow');
},
function() {
jQuery(this).find('.sublinks').hide('slow');
});
});
Além disso, remova isso do seu CSS:
- Código:
.table tbody.statused tr td.tcl:hover .sublinks{display:block}
Re: Efeito hover nos sub fóruns
Olá!
Utilize esse código Javascript:
Remova esse código CSS:
Até mais.
Utilize esse código Javascript:
- Código:
jQuery(document).ready(function(){jQuery('.table tbody.statused tr td.tcl').hover(function(){jQuery(this).find('.sublinks').show('slow')},function(){jQuery(this).find('.sublinks').hide('slow')})});
Remova esse código CSS:
- Código:
.table tbody.statused tr td.tcl:hover .sublinks{display:block}
Até mais.
Re: Efeito hover nos sub fóruns
Independente do Javascript funcionar retire esse CSS, como você quer um efeito de transição, enquanto esse CSS estiver ali o Javascript não vai funcionar:killerplay escreveu:quando eu retiro o codigo css, nao funciona..
- Código:
.sublinks{display:none;font-size:10px;text-align: center;}.table tbody.statused tr td.tcl:hover .sublinks{display:block;}
Tente utilizar esse Javascript:
- Código:
jQuery(document).ready(function(){jQuery('.table tbody.statused tr td.tcl').hover(function(){jQuery(this).find('.sublinks').show('slow')},function(){jQuery(this).find('.sublinks').hide('slow')})});
Até mais.
Re: Efeito hover nos sub fóruns
Olá!
1º - Código a ser utilizado:
Laranja -> Título do sub-fórum.
Negrito -> É a parte que terá de multiplicar caso queira adicionar mais sub-fóruns, ex:
2º - Aplicação do tutorial:
Aceda à:
Painel de controle -> Módulos -> HTML & JavaScript -> Gestão dos códigos JavaScripts
Melhores cumprimentos,
seender
1º - Código a ser utilizado:
Vermelho -> Endereço do sub-fórum./* Sub-fóruns - Início */
jQuery(document).on('ready', function() {
/* Sub-fóruns que irão ser exibidos */
var subforuns = '<a href="Endereço do sub-fórum" id="subforum">Título do sub-fórum</a>';
/* Sub-fóruns que irão ser exibidos */
var forum = 2;
var css = "#topicsmsgs{display:none;}#subforum{padding:7px 7px 7px 7px;}";
jQuery(document).ready(function() {
jQuery("li.row:eq(" + forum + "), td.tcl:eq(" + forum + "), td.row2.icon:eq(" + forum + "), td.row1.over:eq(" + forum + ")").append("<style>" + css + "</style><div id='topicsmsgs'>" + subforuns + "</div>")
});
jQuery(document).each(function() {
jQuery('li.row:eq(' + forum + '), td.tcl:eq(' + forum + '), td.row2.icon:eq(' + forum + '), td.row1.over:eq(' + forum + ')').mouseover(function(){
jQuery("#topicsmsgs").fadeOut("fast");
});
jQuery("li.row:eq(" + forum + "), td.tcl:eq(" + forum + "), td.row2.icon:eq(" + forum + "), td.row1.over:eq(" + forum + ")").mouseleave(function(){
jQuery("#topicsmsgs").fadeIn("fast");
});
});
}
);
/* Sub-fóruns - Fim */
Laranja -> Título do sub-fórum.
Negrito -> É a parte que terá de multiplicar caso queira adicionar mais sub-fóruns, ex:
- Código:
<a href="Endereço do fórum 1" id="subforum">Título do sub-fórum 1</a><a href="Endereço do fórum 2" id="subforum">Título do sub-fórum 2</a>
- A contagem dos fóruns irá começar pelo número 0;
- De forma crescente poderá se obter o número;
- Para cada fórum deverá multiplicar todo o código.
2º - Aplicação do tutorial:
Aceda à:
Painel de controle -> Módulos -> HTML & JavaScript -> Gestão dos códigos JavaScripts
Título Correspondente ao nome da página JavaScript/jQuery que será criada. |
Localização- São destinados os devidos locais para onde você aplicará os efeitos do JavaScript nos fóruns. No nosso caso, aplicaremos em todas as páginas. |
Código JavaScript Campo destinado para receber o código JavaScript criado anteriormente. |
Habilitar o gerenciamento dos códigos JavaScript Ao selecionar a opção sim, estará ativando a função páginas Javascript no seu fórum. Se selecionar não, as páginas serão desabilitadas no fórum. |
- Resultado:
Melhores cumprimentos,
seender
Página 1 de 2 • 1, 2
Tópicos semelhantes
» Efeito Hover nos Fóruns
» Efeito Hover nos Fóruns
» Efeito hover nos fóruns
» Efeito Hover nos fóruns
» Efeito hover nos fóruns
» Efeito Hover nos Fóruns
» Efeito hover nos fóruns
» Efeito Hover nos fóruns
» Efeito hover nos fóruns
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 2
Permissões neste sub-fórum
Não podes responder a tópicos