Tutorial: Categoria stil descriere hover IPB

Utilizator : 08/11/2014

Acest tutorial va pune în aplicare un stil hover, atunci când sunt pe forum mouseover titlu. Tutorial de Wagner

-> Tutoriale, sfaturi și trucuri <-
stil Categorie descriere hover IPB

1º - Template
1. Deschideti index_box ,cautati

{Catrow.forumrow.FORUM_NAME} și înlocuiți-l cu:

Cod:: 
<H {catrow.forumrow.LEVEL} class = "ierarhie" > <o href= "{catrow.forumrow.U_VIEWFORUM}" class= "forumtitle" > {catrow.forumrow.FORUM_NAME} </a> </h{catrow.forumrow.LEVEL}>

În cadrul acestui cod gasiti , Ștergeți-l! Acum cautati

{Catrow.forumrow.FORUM_DESC} și înlocuiți cu:

2º - CSS
In CSS adaugati codul de mai jos

Cod:: .forum_desc_pos {
   Poziția : relativă;
}
.forum_desc_con {
   Lățime : 350px ;
   afișare : nici unul;
   stânga : 10px ;
   float : stânga;
   Poziția : absolută;
   top : - 4px ;
   padding-stânga : 10px ;
   fundal : url ( "http://i.imgur.com/E4lHPSe.png" ) nu-repeta 6px 9px ;
   Z-index : 10.000 ;
}
.forum_description {
   Culoare : #FFF;
   border-radius : 3px ;
   - Moz-border-radius : 3px ;
   - WebKit-border-radius : 3px ;
   fundal : url ( "http://i.imgur.com/zkoWf4I.png" ) se repetă;
   fundal : RGBA ( 15 , 15 , 15 , 0,9 );
   - WebKit-box-shadow : RGBA ( 0 , 0 , 0 , 0,3 ) 0px 1px 7px ;
   - Moz-box-shadow : RGBA ( 0 , 0 , 0 , 0,3 ) 0px 1px 7px ;
   box-shadow : RGBA ( 0 , 0 , 0 , 0,3 ) 0px 1px 7px ;
   font-size : 11px ;
   padding : 5px ;
   afișare : bloc;
   float : stânga;
}

3º - Javascript
Plasare : În toate paginile

Cod:: jQuery ( document de ) .ready ( funcția ( ) {
jQuery ( ".forum_name" ) .hover ( funcția ( ) {
   jQuery ( acest ) .Etapele ( ".forum_desc_pos" ) .children ( ".forum_desc_con" ) .stop ( )
   .animate ( { stânga : "0" , opacitatea : 1 } , "rapid" )
   .css ( "afișaj" , "bloc" ) ;
   } , funcția ( ) {
   jQuery ( acest ) .Etapele ( ".forum_desc_pos" ) .children ( ".forum_desc_con" ) .stop ( )
   .animate ( { stânga : "10" , opacitate : 0 } , "rapid" , funcția ( ) {
   jQuery ( acest ) .hide ( ) ;
   } )
   } ) ;
} ) ;

4º - Previzualizare

Tutorial: Categoria stil descriere hover IPB CKCBbVD