How to select a previous sibling in CSS

Question

So I need to allow for both of my icons to fade in some text when they are hovered over. I've gotten this to work, but the far left one is not able to select the span when the icon is hovered over. I need the text to be on the left of the yelp icon for a design decision. Code provided down below, but I also have a codepen for it: https://codepen.io/ChumperDumper/pen/MWgoEpL

I've already tried to nest the text that needs to be faded in with the icon, but font awesome gives some weird glitches when doing so.

.fa-yelp {
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  -webkit-transition: all 0.5s ease;
  color: red;
  margin: 1rem 2.5rem 1rem 0;
}

.fa-yelp:hover {
  transform: rotate(-20deg);
}

.fa-yelp:hover~.text-bubble-yelp {
  opacity: 1;
  transition: opacity 0.5s ease-in;
}

.fa-twitter {
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  -webkit-transition: all 0.5s ease;
  color: #1DA1F2;
  margin: 1rem 0 1rem 2.5rem;
}

.fa-twitter:hover {
  transform: rotate(20deg);
}

.fa-twitter:hover~.text-bubble-twitter {
  opacity: 1;
  transition: opacity 0.5s ease-in;
}

.text-bubble {
  opacity: 0;
  transition: opacity 0.5s ease-out;
  position: static;
  vertical-align: 25px;
  font-weight: bold;
  font-size: 1.5rem;
  margin: 0 2rem
}

<meta charset="utf-8">
<title>Website</title>
<script src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>
<link rel="stylesheet" href="css/styles.css">
</head>

<body>

  <!-- Welcom Section -->

  <section id="welcome">
    <span class="text-bubble text-bubble-yelp">Review us on Yelp!</span>
    <span class="logo fab fa-yelp fa-3x"></span>
    <span class="logo fab fa-twitter fa-3x"></span>
    <span class="text-bubble text-bubble-twitter">Follow us on Twitter!</span>
  </section>

I expected it to select the sibling but found that it will not select a sibling element that comes before itself. :/

score 0 · Answer 1 · edited Aug 29 '19 at 10:13

I believe this should work for you. Please check - https://codepen.io/Ghostkashak/pen/BaBZwvP

.fa-yelp {
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  -webkit-transition: all 0.5s ease;
  color: red;
  margin: 1rem 2.5rem 1rem 0;
}

.fa-yelp:hover {
  transform: rotate(-20deg);
}

.fa-yelp:hover~.text-bubble-yelp {
  opacity: 1;
  transition: opacity 0.5s ease-in;
}

.fa-twitter {
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  -webkit-transition: all 0.5s ease;
  color: #1DA1F2;
  margin: 1rem 0 1rem 2.5rem;
}

.fa-twitter:hover {
  transform: rotate(20deg);
}

.fa-twitter:hover~.text-bubble-twitter {
  opacity: 1;
  transition: opacity 0.5s ease-in;
}

.text-bubble {
  opacity: 0;
  transition: opacity 0.5s ease-out;
  position: static;
  vertical-align: 25px;
  font-weight: bold;
  font-size: 1.5rem;
  margin: 0 2rem
}

.text-bubble-yelp {
  float: left;
  position: relative;
  top: 25px;
}

<head>
  <meta charset="utf-8">
  <title>Website</title>
  <script src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>
  <link rel="stylesheet" href="css/styles.css">
</head>

<body>

  <!-- Welcom Section -->

  <section id="welcome">
    <span class="logo fab fa-yelp fa-3x"></span>
    <span class="text-bubble text-bubble-yelp">Review us on Yelp!</span>
    <span class="logo fab fa-twitter fa-3x"></span>
    <span class="text-bubble text-bubble-twitter">Follow us on Twitter!</span>
  </section>

Not the best solution, but can solve your problem.

How to select a previous sibling in CSS

1 Answers1