CSS - Ayuda expertos en CSS

 
Vista:
sin imagen de perfil
Val: 3
Ha disminuido 1 puesto en CSS (en relación al último mes)
Gráfica de CSS

Ayuda expertos en CSS

Publicado por Jesús (2 intervenciones) el 03/05/2019 09:23:20
Hola compañeros,

Tengo una pequeña duda, no se si es posible hacer esto en CSS:

Tengo la siguiente estructura:

1
2
3
4
5
6
7
8
9
<div id="columna-01">
     <div id="caja-1">
         <div id="caja-1.1"><span class="texto-1">hola"</span></div>
         <div id="caja-1.2"><span class="texto-1">hola"</span></div>
     <div>
</div>
<div id="columna-02">
     <div id="caja-2"><img src="xxxxx"></div>
</div>

Necesito que cuando cuando el cursor del raton se posicione sobre la caja-1, el texto de la caja-1.1 cambie de color y además, la caja-2 tenga un sombreado por poner un ejemplo.

Lo de la caja-1.1 no hay problema:

1
2
3
#caja-1:hover .caja-1.1:{
color: nuevo
}

El problema es como hago para llamar a la caja-2 cuando el evento en la caja-1 es en :hover.

Ni siquiera se si es posible.

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 joel
Val: 870
Oro
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

Ayuda expertos en CSS

Publicado por joel (252 intervenciones) el 03/05/2019 11:50:39
Hola Jesús, no puedes poner un punto en un nombre de id o clase...

Aquí te he preparado un código que funciona, ya que en tu código tienes ids y en tu css haces referencia a clases en vez de a ids

Haber si te sirve este código:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style>
    #caja-1:hover #caja-11 {color:Red}
    #caja-1:hover #caja-12 {border:1px solid}
    </style>
</head>
 
<body>
 
<div id="columna-01">
     <div id="caja-1">
         <div id="caja-11">hola</div>
         <div id="caja-12"><span class="texto-1">hola</span></div>
     <div>
</div>
 
</body>
</html>
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
sin imagen de perfil
Val: 3
Ha disminuido 1 puesto en CSS (en relación al último mes)
Gráfica de CSS

Ayuda expertos en CSS

Publicado por Jesús (2 intervenciones) el 03/05/2019 11:57:52
Tienes razón, me equivoqué al escribir el código de ejemplo,

tenía que ser así:

#caja-1:hover #caja-1.1:{
color: nuevo
}

Revisando tu ejemplo veo que no resuelve mi problema. El problema es que existe una segunda columna y que cuando hago hover sobre un div de la primera columna quiero aplicar un estilo diferente al contenido (en mi ejemplo, imagen) de la segunda columna, además del texto de la primera columna, no se si me explico.
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 joel
Val: 870
Oro
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

Ayuda expertos en CSS

Publicado por joel (252 intervenciones) el 03/05/2019 14:35:12
En el ejemplo que te he pasado, al pasar por encima cambia el color de la primera columna, y pone un marco en la segunda columna
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