Cambiar color de cada recuadro del menú categorías

[Syd]

Hola,

estoy intentando darle estilo al menú vertical izquierdo de categorías. Quiero que cuando paso el ratón por encima de una categoría el recuadro correspondiente a esa categoría cambie de color. De momento, he probado con background-color:... pero solo se cambia el fondo de las letras de esa categoría, un pequeño recuadrito, pero no el recuadro entero. Alguna ayuda?

 

Por cierto, he probado con a.hover, porque no recuerdo cual es para cuando pasas el ratón por encima..

[marcocp91]

Hola Syd,

 

¿Te importaría especificarnos qué tema estás utilizando? ¿Podrías también añadirnos una captura?

 

Un saludo.

[Syd]

Hola marcocp91,

estoy usando UHUPAGE Free Template PS021, pero ya casi no tiene nada que ver, porque lo utilicé como base. Eso sí, el bloque de categorías sí está casi igual.

Ahí está la captura

[marcocp91]

Hola Syd, y te gustaría que cuando pasaras el ratón por encima del bloque de color rosa, ¿cambiara de color, verdad?

 

Si pudiera ver la web sería perfecto así puedo decirte con precisión el código css.

 

De todos modos, prueba a buscar: #ffccff Debería aparecer algo como:

 

#nombredelacapa {
backgound: #ffccff;
etc etc
}

 

y deberías crear uno debajo así:

 

#nombredelacapa:hover {
backgound: #000; /*nuevo color*/
etc etc
}

 

Un saludo.

[Syd]

Eso es,

ya le he puesto que cambie de color cuando pasas por encima, pero no consigo que me haga una superficie de 205 por 45, solo me cubre las letras.

Esta es la web

http://www.asianexoticdream.com/

 

Esto el css

 

/* Block categories */

#categories_block_left .tree { padding-left: 0.5em; padding-bottom: 20px; }

#categories_block_left .tree li {

border: none;

padding-top: 5px;

padding-left: 15px;

padding-bottom: 20px;/*cambia el espacio entre cada categoria del menu*/

background: none;

margin-left: 0;

font: "Times New Roman", Times, serif;

font-weight: normal;

font-size: 15px;

line-height: 13px

}

#categories_block_left .tree li.last { padding-bottom: 0 }

#categories_block_left .tree ul { padding: 2px 0 0 }

#categories_block_left .tree li li {

padding: 1px 0 1px 15px;

background: none;

font-size: 11px;

font-weight: normal

}

#categories_block_left .tree li li.last { padding-bottom: 0 }

#categories_block_left .tree li li li {

padding-left: 15px;

font-size: 9px

}

#categories_block_left .tree a {

padding-left: 0;

color: #663366;

}

#categories_block_left .tree a:hover { text-decoration: none; background: #ffdeff}

#categories_block_left ul.tree a.selected {

color: #660066;

font-weight: bold

}

#categories_block_left span.grower {

display: block;

float: left;

background-position: 0 3px;

background-repeat: no-repeat;

width: 9px;

height: 15px;

margin: 0 0 0 -12px!important;

margin: 0 0 0 -8px;

padding: 0

}

#categories_block_left span.OPEN { background-image: url('../../../img/icon/less.gif') }

#categories_block_left span.CLOSE { background-image: url('../../../img/icon/more.gif') }

 

div.blockcategories_footer h4{ background:url('../../../img/block_footer_page.gif') repeat-x scroll left top;text-align:center;}

div.blockcategories_footer { background:url('../../../img/block_footer_page_footer.png') repeat-x scroll left bottom #bdc2c9;padding-bottom:5px}

div.blockcategories_footer h4 a{color:#ffffff;font-weight:normal;text-decoration:none}

div.blockcategories_footer .category_footer{ background-image:url('../../../img/block_bg.jpg');}

div.category_footer{ background:none;text-align:center;border:none; }

 

#footer div.category_footer h4 a{color: #666666;}

#footer div.category_footer .list{float:left;}

#footer div.category_footer .list ul.tree li{background:none;border-left:none;}

 

#footer .footer_logo{float: left;width: 188px;}