utilizar hover en etiquetas

RafaRG · #1 (**permalink**) 10/10/2011, 12:52

buenas. mi duda es la siguiente (la expondré con un ejemplo):
quiero poner un div con un fondo azul y que al pasar el cursor por encima se cambie el fondo a verde. el código es el siguiente:

Código PHP:

  <style type="text/css">
#fondo {
    background-color:blue;
    width:200px;
    height:50px;
    padding:5px;
    }
#fondo:hover {
    background-color:green;
    }
</style>
<div id="fondo">Este fondo se cambia al pasar el cursor por encima</div>

pues bien, a parte de este método, existe otro que consiste en meter el css dentro del div de la siguiente forma:

Código PHP:

  <div style="background-color:blue; width:200px; height:50px; padding:5px;">Este fondo se cambia al pasar el cursor por encima</div>

sin embargo, no sé cómo incluir la parte del hover. he probado a poner disparates como style:hover="...", pero como es natural, no me ha dado resultado. ¿alguien podría ayudarme?
muchas gracias

kseso? · #2 (**permalink**) 10/10/2011, 13:01

A las pseudoclasess y a los pseudoelementos de css sólo se pueden acceder vía hoja de estilos (archivo de css independiente) o en las declaraciones realizadas en el head.
Nunca en las declaraciones incrustadas en el cuerpo (body).

La razón, obvia. No existen tales clases o elementos como tales en el etiquetado.

RafaRG · #3 (**permalink**) 10/10/2011, 13:26

entiendo. el problema es que en una web (parecido a un foro) quiero utilizar el hover. pero al editar el html, no me deja poner el head ni el body. por consiguiente, las etiquetas de <style></style> se borran y se muestra el código css en el resultado final.

pero bueno, si no se puede, no se puede. gracias por tu respuesta

y espero que para una próxima versión de css inventen algo XD

kseso? · #4 (**permalink**) 10/10/2011, 13:47

Dudo mucho que inventen nada para esa cuestión.
En el etiquetado html no existen. Ni el estado :hover y demás pseudoclases. Tampoco ningún elemento marcado como p+p (por ejemplo) o un tag que identifique al elemento número tal. Y por lo tanto, no tienes una etiqueta a la que añadir los estilos en línea.

Para esas situaciones (actuar con las pseudoclases) ya está inventado el cómo. Pero no es css:
onmouseover y demás.

Pero como le digo, no es css. Por lo tanto, es ajeno a este foro.

Carlangueitor · #5 (**permalink**) 10/10/2011, 17:23

Realmente que es lo que quieres editar? Me suena a que quieres editar un comentario como los de aquí o los de un blog wordpress. Si ese es el caso ni javascript te servirá.

Saludos

RafaRG · #6 (**permalink**) 11/10/2011, 07:32

bueno, quiero editar un apartado de "información personal" en una plataforma llamada moodle. es algo parecido a un portal entre estudiantes y profesorado que se usa en mi universidad. dicho apartado permite html y opciones avanzadas. pero no permite distinguir entre <head></head> y <body></body>, ya que, como he mencionado antes, se borran automáticamente, por lo que no me permite poner las etiquetas <style></style>, que van en el <head></head>.
sin embargo, si el css lo incluyo en las etiquetas (por ejemplo de <div></div>), sí funciona. pero claro, me limita bastante, porque como me ha dicho kseso?, no se pueden añadir los psduoclases en las etiquetas.
no obstante, creo que java script si lo acepta (no lo he probado). con eso podría poner un script que haga cambiar dos imágenes al pasar el cursor por encima usando OnMouseOver y OnMouseOut y se resolvería el problema.
lo único que quería saber es si existía otra forma de hacerlo con css, ya que me resulta más fácil y me gusta más XD

Carlangueitor · #7 (**permalink**) 11/10/2011, 08:20

No hay otra forma de hacerlo con CSS. Yo apostaría a que no puedes meter JS en Moodle, por cuestiones de seguridad, pero inténtalo.

Saludos