Esto no tiene sentido, es un fallo en css? :S

[yopmail]

Tengo este codigo:

Código PHP:

  <div id="div1"> 
<INPUT  class="boton1" type=submit name=btnG VALUE="Boton1"> 
</div> 
 
<style type="text/css"> 
 
#div1 { 
background:#000; 
width:50px; 
height:50px; 
} 
 
.boton1:hover > #div1 { 
background:#red 
width:150px; 
height:150px; 
} 
 
 
 
</style>  
   

Lo que debería de hacer es al poner el mouse sobre el botón, el div negro tendría que hacerse mas grande... lo curioso y lo mas raro es que si el botón esta dentro del div, no funciona... si esta fuera si funciona... eso es normal o hay algo que no tengo en cuenta.. probé de las tres maneras:

.boton1:hover > #div1
.boton1:hover + #div1
.boton1:hover #div1

pero necesito hacerlo con el botón dentro del div.. y no tengo ni idea que hacer.. cualquier ayuda sera de mucho agradecer

[mortiprogramador]

Pues hasta donde se,
eso funcionaría siempre y cuando el div
fuera 'hijo' del botón, pero en este caso
es al contrario, el botón es hijo del div.

Por esto es que esa regla no funciona.
No se si haya reglas que permitan
trabajar en sentido contrario,
pero mientras alguien nos comenta
yo propongo que uses javascript para
cambiar ese comportamiento.

Lo que se podría hacer es en el over o mouseover del botón,
llamar a una función javascript, y dicha función lo que haría
es buscar el id del div y cambiar el estilo.

Código Javascript:

<script>
    function changeDivStyle()
    {
        document.getElementById('div1').style = 'background:red; width:150px; height:150px;';
    }
</script>
 

Código HTML:

<div id='div1'>
    <input class='boton1' type='submit' name='btnG' value='Boton1' onmouseover='changeDivStyle()'>
</div>
 

Y ya no sería necesaría la regla en el css.

[yopmail]

Muchisimas Gracias :) +1 por tomarte el tiempo a ayudarme

[Rafael]

Efectivamente, el código está al revés. Lo que puedes hacer para no meter javascript es poner un div vacío después del boton.

Código HTML:

<input id="btnG"><div></div>
 

Como ya le has asignado un name a tu boton, uso el mismo como id.

Entonces ya nos evitamos class adicionales y podemos ponerle estilo al div

Código CSS:

#btnG+div {
  z-index: -1; position: relative;  left:-25px; top:-38px;}
 
#btnG:hover+div {
  transform: scale(1.1, 1.1);
  transition: all .3s ease-in-out;}
 

Eso es el truco, lo demás es para darle forma. Revísalo funcionando acá: https://jsfiddle.net/8ojub75u/3/

[yopmail]

Me ha servido de muchooo, muchas gracias si prefiero el CSS siempre es mas ligero :)
+1

Iniciado por Rafael

Efectivamente, el código está al revés. Lo que puedes hacer para no meter javascript es poner un div vacío después del boton.

Código HTML:

<input id="btnG"><div></div>
 

Como ya le has asignado un name a tu boton, uso el mismo como id.

Entonces ya nos evitamos class adicionales y podemos ponerle estilo al div

Código CSS:

#btnG+div {
  z-index: -1; position: relative;  left:-25px; top:-38px;}
 
#btnG:hover+div {
  transform: scale(1.1, 1.1);
  transition: all .3s ease-in-out;}
 

Eso es el truco, lo demás es para darle forma. Revísalo funcionando acá: https://jsfiddle.net/8ojub75u/3/

[g3kdigital]

Ya debería estar resuelta esta duda, pero como tengo algo de tiempo, creo que es bueno ampliarla para que entiendas o entiendan los que leen esto:

Los selectores de css, no afectan en la especificación actual CSS3, a los ancestros, sino a: hermanos y anidaciones.

Existen formas de evadir esta regla, pero complica el html y no viene al tema (me refiero a los enlaces y el selector :target o el hack de la relación entre inputs y labels).

Habiendo dicho esto en librosweb y w3school puedes encontrar que los selectores:

~ --> Afecta a cualquier elementos del DOM al mismo nivel de anidación.
+ --> Afecta sólo al elemento siguiente en el mismo nivel de anidación.

Y > afecta sólo a los hijos anidados, pero no a los "nietos".

Ahora el efecto que quieres lograr, estéticamente se puede emular solo con el botón, al menos es similar al ejercicio que propone Rafael:

Código HTML:

<button class="boton1" type=submit name=btnG VALUE="Boton1">
 

Código CSS:

button{
  box-shadow: 0 0 0 25px black;
  transition: all ease .5s;
}
 
button:hover{
  box-shadow: 0 0 0 35px black;
}
 

[Rafael]

Oh. Interesante a la idea de hacerlo con una sombra.