Is there a selector for parent elements in CSS? [duplicate]

0

I want to edit the css of an element when hovering a label <a> .

This is my HTML:

<div class="container">
  <div class="row">
    <div class="menu-admin-elemento col-6">
      <div>
        <div class="menu-admin-img-contenedor">
          <img src="">
        </div>
        <h2>
          <a href="#">
          </a>
        </h2>
      </div>
    </div>
  </div>
</div>

This is my SCSS:

@import '../../../../styles.scss';

.container {
  .row {
    .menu-admin-elemento {
      div {
        .menu-admin-img-contenedor {
          img {
            /*
              Quiero editar el css de este elemento utilizando
              la propiedad hover de la <a> de abajo.
            */
          }
        }
        h2 {
          a {
            &:hover {
            }
            /*
              Editar el CSS de .menu-admin-img-contenedor > img
              haciendo hover a <a>
            */
          }
        }
      }
    }
  }
}
    
asked by akko 06.04.2018 в 00:47
source

2 answers

0

No, css does not allow you to do that, you will have to use Javascript

elemento.addEventListener('mouseove', () => { ... })

    
answered by 06.04.2018 в 00:58
0

You can get the effect you want by doing tricks in CSS. You can put the container div.menu-admin-img-contenedor below the h2 , then change the style of the container with the: hover in the link as follows:

Fiddle

As you can see by setting the h2 above you can act on the container ( div.menu-admin-img-contenedor ), and to get what you want, you simply change the order of the elements (you need to use a fluid positioning system).

Here is more information.

NOTE: Selectors for parent elements I'm afraid there will not be until the next version of CSS.

    
answered by 08.04.2018 в 11:56