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

 
Vista:

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 claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de xve
Val: 1.144
Oro
Ha mantenido su posición en HTML (en relación al último mes)
Gráfica de HTML

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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!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 claraNo me gusta: Está respuesta no esta clara o no es útil
0
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):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<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
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<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
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de xve
Val: 1.144
Oro
Ha mantenido su posición en HTML (en relación al último mes)
Gráfica de HTML

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
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
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
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar