Sidebar com fundo hover

Oiee geléinhas de amora tudo bem?? Hoje vou ensinar para vocês como por efeito hover na sidebar igual aqui do blog. Vou mostrar como está os códigos da minha sidebar pelo html do meu modelo:

.sidebar h2{

background: #8B8989 url(http://static.tumblr.com/koam7dd/7wAmaylha/la__o_7.gif) no-repeat;

padding: 10px 0 10px 50px;

background-position: 7px 8px;

font-weight: 600;

margin-top: 9;

margin-bottom: 9px;

color: #FFF;

text-transform: uppercase;

font-size: 12px;

font-family: 'Lobster Two', cursive;

-webkit-border-radius: 10px;

-moz-border-radius: 10px;

border-radius: 10px;     

}

Caso a de vocês não estiverem assim, estarão praticamente quase igual pois as vezes é uma coisa ou outra que muda nos códigos, independente de como está o código do corpo da sua sidebar, esse código hover funciona em quase todas as sidebar, até onde testei nas minhas, todas funcionaram. O código para fazer o efeito hover no fundo da sua sidebar é esse aqui:

.sidebar h2:hover {

background: #7FFFD4; ---/* cor do fundo ao passar o mouse */

color: #000; ---/* cor da fonte do título ao passar o mouse */

border-radius: 30px;

text-align: center;

border: 2px solid #696969; ---/* espressura, tipo e cor da bora */

color: #fff; ---/* cor da fonte do título */

-webkit-transition: 0.4s;

}

Aqui está as cores que eu uso na minha sidebar, mas vocês podem mudar as cores, o tamanho da borda em volta onde ficará o texto alinhado se é no meio, esquerda ou direita, cor da fonte e o tempo da transição do efeito. É isso meus amores, super fácil e com um efeito muito legal, eu vejo em outros blogs efeitos hovers nos títulos mas no fundo até agora não vi nenhum blog com esse efeito igual ao da minha sidebar. Beijos lindos e lindas espero que tenham gostado do tuto de hoje =)