HTML - Cambiar color del fondo al pasar el ratón por encima

Cambiar color del fondo al pasar el ratón por encima

Publicado por linarinho (2 intervenciones) el 27/05/2013 17:53:22

Hola.

Tengo un problema que se me está resistiendo, a ver si me podéis ayudar.

Lo que quiero hacer es lo siguiente:

Quiero hacer una enlace. La parte de arriba del enlace será una imagen y la parte de abajo un cuadro con un texto.
Cuando pase el ratón por encima de la imagen o del cuadro que contiene el texto, el fondo del cuadro que contiene el texto tiene que cambiar de color.

Os enlazo una imagen para que veáis lo que quiero hacer.

Muchas gracias.

Valora esta pregunta

Me gusta: Está pregunta es útil y esta clara

No me gusta: Está pregunta no esta clara o no es útil

Responder

Pos: 2

Val: 1.144

Cambiar color del fondo al pasar el ratón por encima

Publicado por xve (1543 intervenciones) el 27/05/2013 22:53:48

Hola linarinho, la unica manera que se me ocurre, es con jquery... mira este ejemplo:

<!DOCTYPE html>

<html>

<head>

    <script src="http://code.jquery.com/jquery-latest.js"></script>

    <script type="text/javascript">

    $(document).ready(function(){

        $("#content img").hover(

            function(){

                $("#content").css({"background-color":"#cccccc"});

},

            function(){

                $("#content").css({"background-color":"#ffffff"});

);

});

    </script>

</head>

<body>

    <div id='content'>

        <img src="http://www.lawebdelprogramador.com/logolwp100x25.jpg">

        <p>texto</p>

    </div>

</body>

</html>

Coméntanos, ok?

Valora esta respuesta

Me gusta: Está respuesta es útil y esta clara

No me gusta: Está respuesta no esta clara o no es útil

Comentar

Cambiar color del fondo al pasar el ratón por encima

Publicado por Jose Manuel (20 intervenciones) el 28/05/2013 08:16:53

Hola:

Solamente como complemento alternativo de la solución que ya ha expuesto XVE: quizás CSS sea otra forma de abordarlo, aunque el navegador o navegadores objetivo, deben reconocer pseudoclases como "hover" (y reutilizando el ejemplo indicado por XVE):

<style type="text/css">

   .imagenConPieDeTexto {

      background-color: #ccc;

   .imagenConPieDeTexto:hover {

      background-color: #fff;

</style>

<body>

   <div id='content' class="imagenConPieDeTexto">

      <img src="http://www.lawebdelprogramador.com/logolwp100x25.jpg">

      <p class="imagenConPieDeTexto">texto</p>

   </div>

</body>

Espero que sirva para ayudar. Saludos.
José Manuel
=====================================
http://www.orbisapientia.com

Valora esta respuesta

Comentar

Cambiar color del fondo al pasar el ratón por encima

Publicado por linarinho (1 intervención) el 28/05/2013 11:17:20

xve y Jose Manuel gracias por vuestra ayuda.

Con vuestros métodos no acababa de conseguir el resultado que yo quería. Finalmente creo que lo he resuelto de la siguiente forma:

<html>

<head>

</head>

<body>

<style>

h2 {color:white; margin:0px;}

.contenedor_imagen {width:100px; background-color:green;}

.contenedor_imagen a {display:block; text-decoration: none;}

.contenedor_imagen a:hover {width:100px; background-color:lightgreen;}

.contenedor_imagen span {display:block; padding:5px;}

</style>

<div class="contenedor_imagen">

    <a href="#">

    <img src="http://www.lawebdelprogramador.com/logolwp100x25.jpg" />

    <span>

    <h2>Titulo</h2>

    </span>

    </a>

</div>

</body>

</html>

De momento de esta forma me funciona ¿Creéis que el código es correcto?

Valora esta respuesta

Comentar

Pos: 2

Val: 1.144

Cambiar color del fondo al pasar el ratón por encima

Publicado por xve (1543 intervenciones) el 28/05/2013 14:38:47

Gracias por comentarlo linarinho!!! lo que pasa, es que te cambiara el fondo tanto si se pasa por encima de la imagen como por encima del texto, no?

Valora esta respuesta

Comentar

Cambiar color del fondo al pasar el ratón por encima

Publicado por linarinho (2 intervenciones) el 28/05/2013 14:58:49

Si. Eso es lo que quería realmente. Que todo el conjunto fuera un enlace y se comportara como tal. Lo siento si me he explicado un poco mal exponiendo mi duda.

Valora esta respuesta

Comentar

Como mostrar unos valores u otros en un formulario según opción seleccionada en un radio button

Formulario html5 para enviar correo