targeting 2nd child in css hover

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’)


Source: css3

Leave a Reply