在css悬停中定位第二个孩子

Question

HTML snippet

        <a href="<?php the_permalink(); ?>" class="linkage"></a>
        <div class="test"><h1>test</h1></div>
        <div class="cover"></div>

CSS

.linkage, .cover {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

.linkage { z-index: 10; }

.cover {
  background-color: rgba(0, 0, 0, 0);
  transition: background-color 0.35s ease;
}

.test {
  position: absolute;
  z-index: 9;
  margin: 0 50%;
  opacity:0;
  transition: opacity 0.5s ease;
 }

.linkage:hover + .test {
  opacity:1;
  transition-delay:0s;
}

linkage takes up the full size of the space. It creates a hyperlink over the whole area (z-sexed to the top so that hovering over other elements doesn't disrupt the link)

hovering over 'linkage' make the opacity of 'test' visible. I want it also to make the visibility of 'cover' visible as well, but I can't seem to target it (since it's not i direct child or adjacent to 'linkage')

Answer 1

You can use next all siblings

.linkage:hover ~ .cover{
}

or

.linkage:hover + .test + .cover{
}

Answer 2

You can use ~ for general sibling. Where + is used for next sibling element.

.linkage:hover ~ .cover {
  opacity:1;
  transition-delay:0s;
}

Check Fiddle

Answer 3

This will solve your problem:

.linkage:hover + .test, .linkage:hover ~ .cover {
  opacity:1;
  transition-delay:0s;
}

In general,

1. element+element

   eg div + p

   Explaination: Selects all 'p' elements that are placed immediately after 'div' elements

2. element1~element2

   eg p ~ ul

   Explaination: Selects every 'ul' element that are preceded by a 'p' element

Visit, Here for more information about various selectors.