0

Es posible cambiar el estilo de un elemento padre con CSS cuando se hace hover sobre su elemento hijo?

2
  • 2
    Hola, Luis. No es posible Commented el 24 may. 2021 a las 3:04
  • Con solo CSS, no, podrías usar javascript para hacerlo posible.
    – Rodrigo
    Commented el 24 may. 2021 a las 12:05

2 respuestas 2

2

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>

0

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

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.