Hover la butoanele meniului de navigare

Cum as putea sa fac un efect de hover la butoanele meniului? Am mai vazut pe alte forumuri, si m-am intrebat cum pot face si eu? :-??

Un efect hover se poate realiza foarte simplu:

Cod:

a.mainmenu {
padding: 2px;
color:#culoare-default;
background-color:#culoare-default;
border: 1px solid #culoare-default;
border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
}

a.mainmenu:hover {
padding: 2px;
color:#culoare-hover;
background-color:#culoare-hover;
border: 1px solid #culoare-hover;
border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
}

Ok, multumesc, dar eu am niste imagini puse, si sunt doar imagini, fara vreun fel de text. Cum as putea face ca atunci cand dau cu cursorul peste ele sa se intample ceva?

pai atunci iti trebuie alte coduri

ai aici un meniu facut deagata
daca ai nevoie de alte imagini faci o cerere aici cu specificatiile si dimensiunile dorite
https://help.forumgratuit.ro/f35-cereri-de-imagini

Cod:



#i_icon_mini_index{width:85px; height:32px; background:url(http://i64.servimg.com/u/f64/13/24/64/14/bar_an10.png) no-repeat 0 0;}
#i_icon_mini_index:hover{background:url(http://i64.servimg.com/u/f64/13/24/64/14/bar_an10.png) no-repeat 0 -32px;}
#i_icon_mini_gallery{width:86px; height:32px; background:url(http://i64.servimg.com/u/f64/13/24/64/14/bar_an12.png) no-repeat 0 0;}
#i_icon_mini_gallery:hover{background:url(http://i64.servimg.com/u/f64/13/24/64/14/bar_an12.png) no-repeat 0 -32px;}
#i_icon_mini_calendar{width:86px; height:32px; background:url(http://i64.servimg.com/u/f64/13/24/64/14/bar_an11.png) no-repeat 0 0;}
#i_icon_mini_calendar:hover{background:url(http://i64.servimg.com/u/f64/13/24/64/14/bar_an11.png) no-repeat 0 -32px;}
#i_icon_mini_portal{width:86px; height:32px; background:url(http://i64.servimg.com/u/f64/13/24/64/14/bar_an13.png) no-repeat 0 0;}
#i_icon_mini_portal:hover{background:url(http://i64.servimg.com/u/f64/13/24/64/14/bar_an13.png) no-repeat 0 -32px;}
#i_icon_mini_faq{width:86px; height:32px; background:url(http://i64.servimg.com/u/f64/13/24/64/14/nav_0510.png) no-repeat 0 0;}
#i_icon_mini_faq:hover{background:url(http://i64.servimg.com/u/f64/13/24/64/14/nav_0510.png) no-repeat 0 -32px;}
#i_icon_mini_search{width:86px; height:32px; background:url(http://i64.servimg.com/u/f64/13/24/64/14/nav_0610.png) no-repeat 0 0;}
#i_icon_mini_search:hover{background:url(http://i64.servimg.com/u/f64/13/24/64/14/nav_0610.png) no-repeat 0 -32px;}
#i_icon_mini_members{width:86px; height:32px; background:url(http://i64.servimg.com/u/f64/13/24/64/14/bar_an14.png) no-repeat 0 0;}
#i_icon_mini_members:hover{background:url(http://i64.servimg.com/u/f64/13/24/64/14/bar_an14.png) no-repeat 0 -32px;}
#i_icon_mini_groups{width:86px; height:32px; background:url(http://i64.servimg.com/u/f64/13/24/64/14/bar_an15.png) no-repeat 0 0;}
#i_icon_mini_groups:hover{background:url(http://i64.servimg.com/u/f64/13/24/64/14/bar_an15.png) no-repeat 0 -32px;}
#i_icon_mini_profile{width:86px; height:32px; background:url(http://i64.servimg.com/u/f64/13/24/64/14/bar_an16.png) no-repeat 0 0;}
#i_icon_mini_profile:hover{background:url(http://i64.servimg.com/u/f64/13/24/64/14/bar_an16.png) no-repeat 0 -32px;}
#i_icon_mini_message{width:86px; height:32px; background:url(http://i64.servimg.com/u/f64/13/24/64/14/nav_1010.png) no-repeat 0 0;}
#i_icon_mini_message:hover{background:url(http://i64.servimg.com/u/f64/13/24/64/14/nav_1010.png) no-repeat 0 -32px;}
#i_icon_mini_new_message{width:86px; height:30px; background:url(http://i64.servimg.com/u/f64/13/24/64/14/rere_110.png) no-repeat 0 0;}
#i_icon_mini_new_message:hover{ background:url(http://i64.servimg.com/u/f64/13/24/64/14/rere_110.png) no-repeat 0 -32px;}
#i_icon_mini_logout{width:41px; height:32px; background:url(http://i65.servimg.com/u/f65/11/95/30/70/re_1110.png) no-repeat 0 0;}
#i_icon_mini_logout:hover{background:url(http://i65.servimg.com/u/f65/11/95/30/70/re_1110.png) no-repeat 0 -32px;}
#i_icon_mini_register{width:86px; height:32px; background:url(http://i69.servimg.com/u/f69/13/29/02/28/regist10.png) no-repeat 0 0;}
#i_icon_mini_register:hover{background:url(http://i69.servimg.com/u/f69/13/29/02/28/regist10.png) no-repeat 0 -32px;}
#i_icon_mini_login{width:41px; height:32px; background:url(http://i64.servimg.com/u/f64/13/24/64/14/nav_1110.png) no-repeat 0 0;}
#i_icon_mini_login:hover{background:url(http://i64.servimg.com/u/f64/13/24/64/14/nav_1110.png) no-repeat 0 -32px;}


Nu functioneaza. Pentru acest cod cred ca trebuie sa maschez imaginile de la butoane, nu?

EDIT: Cu tot cu imagini mascate si tot nu functioneaza

Pai, folosind imagini, nu puteti aplica un efect hover.

Nu uitati sa inlocuiti, din codul postat de mine mai sus, #culoare-hover si #culoare-default cu codurile necesare.

default = de origine;
hover = cand isi activeaza efectul hover.

Stiu ce inseamna hover si default. Am rezolvat cu tot cu imagini. Rezultatul il vedeti la profil Mersi de ajutor amandurora.