Es posible cambiar el estilo de un elemento padre con CSS cuando se hace hover sobre su elemento hijo?
2 respuestas
CSS
Sí, usando el selector :has
sin embargo no es soportada por ningun navegador
Si el caso fuera el contrario entonces sería así
.parent:has(.child:hover) {
/* Propiedades */
}
Javascript
Como no es posible hacerlo con CSS puedes usar Javascript para ese caso
function child_hover(child) {
let parent = child.parentElement;
if(!parent.classList.contains("hover_class_style"))
parent.classList.add("hover_class_style");
}
function child_exit(child) {
let parent = child.parentElement;
parent.classList.remove("hover_class_style");
}
.parent_class {
background: gray;
width: 100px;
height: 100px;
}
.hover_class_style {
background: blue;
}
<div class="parent_class">
<button onmouseenter="child_hover(this)" onmouseout="child_exit(this)">Hover me!</button>
</div>
Edit: Para hacer que funcione con todos los elementos de la misma clase
function child_hover(child) {
let parent = child.parentElement;
if(!parent.classList.contains("hover_class_style"))
parent.classList.add("hover_class_style");
}
function child_exit(child) {
let parent = child.parentElement;
parent.classList.remove("hover_class_style");
}
let childrens = document.querySelectorAll(".child_class");
childrens.forEach(el => {
el.onmouseenter = () => child_hover(el);
el.onmouseout = () => child_exit(el);
});
.parent_class {
background: gray;
width: 100px;
height: 100px;
}
.hover_class_style {
background: blue;
}
.child_class {
/* Propiedades */
}
<div class="parent_class">
<button class="child_class">Hover me!</button>
</div>
<div class="parent_class">
<button class="child_class">Hover me!</button>
</div>
me parece que en todo caso tendrías que cambiar el elemento padre con hover, no al hijo por que va cambiar al hijo
entonces como tal no, pero se puede hacer con javascript algo así como
document.addEventListener/*es un escucha del click*/('DOMContentLoad', )
let NombreDeVariable = document.getElementsByClassName/*o en su defecto .getElementsById*/ ('NombreDelHijo')
let NombreDeOtraVariable = document.getElementsByClassName/*o en su defecto .getElementsById*/ ('NombreDelPadre')
function NombreDeLaFuncion(){
/*y lo que quieres que haga el padre*/
ejemplos
document.getElementsByClassName('VariablePuestaAlPadre').style.display = 'inline-block';
Variable[Parametro].className += ' active';
Variable[Parametro].className.replace(" active", "");
}
entonces en el mismo documento html agregas a tu elemento hijo
onclick"NombreDeLaFuncion(ParametroDeLaFunción)"
Sería algo muy parecido a eso aun que javascript apenas estoy aprendiendo, no creo que funcione exactamente el codigo así pero es el ejemplo, ojala te sirva, saludos