Changing a grid item's display status when hovering over another grid item

Question

I have a basic 3 x 3 CSS Grid layout and I'm having trouble making some text appear when hovering over an animated icon. It's a portfolio homepage where each side of the screen leads to a different section of the site. To avoid a messy layout I wanted the name of the section to be hidden until the user shows interest in it by hovering.

I need some assistance on properly targeting a certain grid area item when hovering other another.

I've tried every method I could find on trying to target the h2 text by hovering over the icons but the only solution I could find that works is by targeting the entire grid-container. Anything more specific than that and the h2 text doesnt show.

I'm guessing I could maybe make this doable by making the grid bigger and putting the h2 elements and the font awesome icons in their own area. I would like to keep the grid smaller though if possible.

<body
  <div class="grid-container">
    <div class="main">
      <img src="https://i.imgur.com/va67zMv.jpg"/>
      <h1>Hello! My name is Tyler Sunderland and I'm a <span id="rotate">this</span>!<h1/>
    </div>
    <div class="top">
      <h2>About Me</h2>
      <i class="fal fa-chevron-right fa-3x" data-fa-transform="rotate-90"></i>
    </div>
    <div class="right">
      <i class="fal fa-chevron-right fa-3x faa-passing animated" data-fa-transform="rotate-180"></i>
      <h2>Projects</h2>
    </div>
    <div class="left">
      <h2>Blog</h2>
    <i class="fal fa-chevron-right fa-3x"></i>
    </div>
    <div class="down">
    <i class="fal fa-chevron-right fa-3x" data-fa-transform="rotate-270"></i>
      <h2>Contact Me</h2>
    </div>
  </div>
</body>

body {
  padding: 0;
  margin: 0;
}

h1 {
  font-size: 1em;
}

.grid-container {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  grid-template-areas: ". top ." "left main right" ". down .";
  grid-gap: 5px;
  height: 100vh;
  width: 100vw;
  overflow-x: hidden;
  overflow-y: hidden;

}

.grid-container > div > h1, h2, p {
  font-family: 'Roboto', sans-serif;
}

.grid-container > div > h2 {
  padding: 0px;
  margin: 0px;
  font-size: 1.5em;
}

.main { 
  display: grid;
  grid-area: main;
  align-items: center;
  justify-items: center;
}

.main > img {
  width: 200px;
  height: 200px;
  border-radius: 50%;
}

.main > h1 {
  margin: 0;
  padding: 0;
}

.right {
  display: grid;
  grid-area: right;
  align-items: center;
  justify-items: end;
  align-self: center;
  grid-auto-flow: row;
}

.right > h2 {
  display: none;
  grid-row: 1;
  color: #008C00;
  writing-mode: vertical-rl;
  text-orientation: upright;
}

body.grid-container:hover .right > h2 {
  display: unset;
}

.right > .fa-chevron-right {
  grid-row: 1;
  color: #008C00;
  margin: 10px;
  animation: passingright 3s infinite;
}

@keyframes passingright {
0% {
-webkit-transform: translateX(50%);
transform: translateX(50%);
opacity: 0;
}
50% {
-webkit-transform: translateX(0%);
transform: translateX(0%);
opacity: 1;
}
100% {
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
opacity: 0;
}
}

.top {
  display: grid;
  grid-area: top;
  align-items: start;
  justify-items: center;
}

.top > .fa-chevron-right {
  display: block;
  column-row: 1;
  color: #00008C;
  animation: passingtop 3s infinite;
}

@keyframes passingtop {
0% {
-webkit-transform: translateY(-25%);
transform: translateY(-25%);
opacity: 0;
}
50% {
-webkit-transform: translateY(0%);
transform: translateY(0%);
opacity: 1;
}
100% {
-webkit-transform: translateY(25%);
transform: translateY(25%);
opacity: 0;
}
}

.top > h2 {
  display: none;
  color: #00008C;
}

body.grid-container:hover .top > h2 {
  display: contents;
}

.left {
  display: grid;
  grid-area: left;
  align-items: center;
  justify-items: left;
  align-self: center;
  grid-auto-flow: row;
}
.left > h2 {
  display: none;
  grid-row: 1;
  color: #460046;
  writing-mode: vertical-rl;
  text-orientation: upright;
}

body.grid-container:hover .left > h2 {
  display: unset;
}

.left > .fa-chevron-right {
  grid-row: 1;
  color: #460046;
  margin: 10px;
  animation: passingleft 3s infinite;
}

@keyframes passingleft {
0% {
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
opacity: 0;
}
50% {
-webkit-transform: translateX(0%);
transform: translateX(0%);
opacity: 1;
}
100% {
-webkit-transform: translateX(50%);
transform: translateX(50%);
opacity: 0;
}
}

.down {
  display: grid;
  grid-area: down;
  align-items: end;
  justify-items: center;
}

.down > .fa-chevron-right {
  color: #8C0000;
   animation: passingdown 3s infinite;
}

@keyframes passingdown {
0% {
-webkit-transform: translateY(25%);
transform: translateY(25%);
opacity: 0;
}
50% {
-webkit-transform: translateY(0%);
transform: translateY(0%);
opacity: 1;
}
100% {
-webkit-transform: translateY(-25%);
transform: translateY(-25%);
opacity: 0;
}
}

.down > h2 {
  display: none;
  color: #8C0000;
  }

body.grid-container:hover .down > h2 {
  display: contents;
}

I expected

body.grid-container.top.fa-chevron-right:hover .top > h2 {
display: contents;
}

to make the h2 text on top show when hovering over the animated icon but the only code I could get to work is the code below, which is way too broad to be useful.

body.grid-container:hover .top > h2 {
  display: contents;
}

When hover you can only target siblings and children positioned _after_ (in the markup) the one hovered, not previous ones. And for siblings, they need to share the same parent. So in your case you will need script, or possibly, using Flexbox, swap markup order in the `div`, and then, with the flex property `order` still get the same visual layout as with the sample you provided here. — Asons, May 23 '19 at 17:55
@LGSon In the example I showed I am trying to target something positioned after the item I'm hovering on in the markup. The h2 element on top is written after the icon right? And both the h2 element and the icon are siblings of the top area but the + and ~ symbols didn't seem to be working when I tried using those to make it work — Tyler Sunderland, May 23 '19 at 17:58
First off, there is no single element with all the classes in this rule `body.grid-container.top.fa-chevron-right:hover` ... should be a space between `body` and `.container` and `.top` and `.fa-chevron-right`. — Asons, May 23 '19 at 18:06
Second, in the `.top` element `
` comes before the ``, hence the `body .grid-container .top .fa-chevron-right:hover .top > h2` rule (here I added the needed spaces in the rule) won't work since you can't make the `` target its parent `.top` and then `
`. For that a parent selector is needed, and those doesn't exist yet. — Asons, May 23 '19 at 18:08
Third, any `` can only target element _within_ its parent, not in any other parent. — Asons, May 23 '19 at 18:09
Thank you @LGSon for the in-depth explanation. You prevented a lot of hair pulling. I guess I'll start looking at alternative methods until a parent selector is made possible. I've been trying to do this for days and it's a relief knowing I can move on to other options and not feel like a failure lol. Thanks for pointing out my error in the spacing as well that'll be crucial in the future. Cheers mate! — Tyler Sunderland, May 23 '19 at 18:23

Changing a grid item's display status when hovering over another grid item

` comes before the ``, hence the `body .grid-container .top .fa-chevron-right:hover .top > h2` rule (here I added the needed spaces in the rule) won't work since you can't make the `` target its parent `.top` and then ``. For that a parent selector is needed, and those doesn't exist yet.

`. For that a parent selector is needed, and those doesn't exist yet.

0 Answers0

` comes before the ``, hence the `body .grid-container .top .fa-chevron-right:hover .top > h2` rule (here I added the needed spaces in the rule) won't work since you can't make the `` target its parent `.top` and then `
`. For that a parent selector is needed, and those doesn't exist yet.