Efecto Maestros del web

[Celcius]

Hola amigos, una pregunta que seguro para ustedes sera simple. Como hago el efecto que hacen en los comentarios de maestros del web. Es decir, cuando uno posa el mouse sobre un comentario, éste cambia de color en su borde izquierdo. alguien me podria facilitar el codigo Css de ese efecto? muchas gracias.

[GastoNike]

Solo es un efecto hover... ejemplo

div.autorcomentario:hover {

border-left-color: #000;

}

Se lo puedes aplicar casi a cualquier elemento, hasta a un h1...

Saludos ;)

[Mikmoro]

Iniciado por GastoNike

Se lo puedes aplicar casi a cualquier elemento, hasta a un h1...

Ojo, pero no para explorer 6 y anteriores, que sólo funciona con lo enlaces (a).

Mikel.

[Celcius]

Hola amigos, agradezco mucho su respuesta. Pero mi pregunta seria respecto hacer eso utilizando la etiqueta <b> del html, es que mis conocimientos de Css son bastante basicos, pero me gustaria aprender mas... solo que ésta semana debo presentar un trabajo y quiero ponerle ese efecto.Alguien me diga como hacerlo con la etiqueta <b> por favor... muchas gracias

[Mikmoro]

¿Con la etiqueta b? No se puede. No te entiendo.

Mikel.

[GastoNike]

Explícate mejor

[Celcius]

Con gusto,
Como me mencionan que se puede aplicar a casi cualquier elemento como un <h1>, pienso que tambien es aplicable a una etiqueta <b>... si me equivoco me gustaria me digan porque no se puede... muchas graicias por su ayuda.

Saludos

[Mikmoro]

En primer lugar, en mi primera respuesta te decía que:

Ojo, pero no para explorer 6 y anteriores, que sólo funciona con lo enlaces (a).

Y en segundo lugar, ¿por qué con la etiqueta b? creo que es eso lo que no entendemos, porque carece de sentido. Deberías explicar bien qué tienes y querrías hacer, para poder aconsejarte.

Mikel.

[Celcius]

En primer lugar, no conosco mucho de Css y espero me comprendan. Paso a explicarles que deseo hacer:

Deseo crear un menú con un cambio de color del fondo y los bordes cuando pase el cursor de Mouse encima. Lei por ahi que puedo usar Divs, pero me marea un poco ese tema por ahora, ustedes que me sugieren?

[caricatos]

Hola:

Si no me equivoco el :hover debería funcionar en todas las etiquetas visibles, pero con explorer no... ese efecto solo sería posible con javascript, programando los eventos mouseover/mouseout.

Saludos

[Celcius]

Hola, supongo que no me entendieron la pregunta y siento no haberme explicado correctamente. Lo logré y pégo el código para que lo vean (Utilicé la etiqueta <a>)

Código HTML:

a {
 font-size:10pt;
 font-family:verdana,tahoma,arial;
 height:50px;
 width:200px;
 background-color:#E3F4FD;
 border-left: #72C6F3 solid 5px;
 border-bottom: #72C6F3 solid 2px;
 margin-top:1px;
 padding-left:5pt;
 padding-top:13pt;
 text-align:left;
}
a:hover {
 font-size:10pt;
 font-family:verdana,tahoma,arial;
 background-color:#CDEBFC;
 height:50px;
 width:200px;
 border-left: #000000 solid 5px;
 border-bottom: #000000 solid 2px;
 margin-top:1px;
 padding-left:5pt;
 padding-top:13pt;
 text-align:left;
}

Bueno ahora si me funciona, muchas gracias por la atención.

[Mikmoro]

Iniciado por Celcius

En primer lugar, no conosco mucho de Css y espero me comprendan. Paso a explicarles que deseo hacer:

Deseo crear un menú con un cambio de color del fondo y los bordes cuando pase el cursor de Mouse encima. Lei por ahi que puedo usar Divs, pero me marea un poco ese tema por ahora, ustedes que me sugieren?

Eso ya es otra cosa.

Si vas a hacer un menú, el menú tendrá enlaces. Entonces, en los enlaces puedes aplicar el pseudo elemento :hover, que produce el efecto que quieres, como ya te habíamos comentado.

Eso se aplica en la hoja de estilo. Sería de esta manera: si creas tu menú con enlaces (etiquetas a) de esta manera por ejemplo:

<a href="#">Un enlace</a>

ahora en la css pones algo así:

a {color: #fff; background-color: #f00;}
a:hover {color: #f00; background-color: #fff; border: solid #f0f;}

por ejemplo, pudiendo poner en ambas etiquetas los estilos que más te gusten.

Espero haberme esplicado bien y que lo sepas aplicar:

Mikel.

EDITO: bueno, ponía mi respueta a la vez que la tuya. Ya veo que lo has resuelto.

[juaniquillo]

Es cierto lo que dice Mikel, esto no funciona en IE6 o anteriores. en el caso del foro el efecto no es una prioridad y por eso no importa si lo usas no funciona en IE6. Tú tienes que decidir si el efecto en tu caso es esencial o no. Si fuera esencial lo mejor es usar javascript. Por cierto, este es el estilo que usa el foro:

Código HTML:

.tdtitle {font-size:13px;}
.tdtitle:hover{background:#eee;}

en cuanto a lo del elemento <b>, creo que sería mejor que lo usaras en un elemento bloque y con algo de padding para que se vea mejor el efecto.

EDITO:

Ja, me tarde mucho en responder.

[Celcius]

Jejeje muchas gracias a todos, en realidad consegui lo que deseaba con la etiqueta <a> y lo hice como enciona Mikel.

Muchas gracias a todos, Dios los bendiga :)