CODEWITHSUNDEEP
htmlcsshover
OVOSZN
OVOSZN

Reputation: 1

Display text on icon hover using HTML/CSS?

What I'm after is three icons to be displayed at all times in a row. Then, once one of the icons is hovered over, text displays underneath all three. Then, once the next icon is hovered over, different text etc. When no icon is hovered over, no text displays. I saw something very similar done using HTML and CSS so was wondering where I've gone wrong.

Thanks in advance

body {
  text-align: center;
}

.fa {
  padding: 20px;
}

#twitterText,
#facebookText,
#instagramText {
  display: none;
}

.fa-twitter:hover + #twitterText {
  display: block;
}

.fa-facebook:hover + #facebookText {
  display: block;
}

.fa-instagram:hover + #instagramText {
  display: block;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">


<i class="fa fa-twitter fa-5x"></i>
<i class="fa fa-facebook fa-5x"></i>
<i class="fa fa-instagram fa-5x"></i>

<p id="twitterText">Twitter</p>
<p id="facebookText">Facebook</p>
<p id="instagramText">Instagram</p>

Upvotes: 0

Views: 13590

Answers (1)

jafarbtech
jafarbtech

Reputation: 7015

replae + with ~ which indicate successor sibling

body {
  text-align: center;
}

.fa {
  padding: 20px;
}

#twitterText,
#facebookText,
#instagramText {
  display: none;
}

.fa-twitter:hover ~ #twitterText {
  display: block;
}

.fa-facebook:hover ~ #facebookText {
  display: block;
}

.fa-instagram:hover ~ #instagramText {
  display: block;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">


<i class="fa fa-twitter fa-5x"></i>
<i class="fa fa-facebook fa-5x"></i>
<i class="fa fa-instagram fa-5x"></i>

<p id="twitterText">Twitter</p>
<p id="facebookText">Facebook</p>
<p id="instagramText">Instagram</p>

Upvotes: 5

Related Questions