-1

I'm trying to build a website with bootstrap and currently I am trying to implement a feature that does the following: there is a picture and some text (a link, to be precise) next to it. The text is hidden by default and I want it to be shown when I hover over the image. However, this doesn't happen and I can't figure out why.

HTML code of the image and the text: 

<div class="row align-items-center justify-content-center" id="linkedinrow">
  <div class="col-1 align-self-center" id="linkedinpiccol">
    <a href="https://www.linkedin.com/" id="linkedinpica"><img src="images/linkedin.svg" alt="LinkedIn" id="linkedinpic"></a>
  </div>
  <div class="col align-self-center" id="linkedintextcol">
    <a id="linkedintext" href="https://www.linkedin.com/">https://www.linkedin.com</a>
  </div>
</div>

CSS code:

#linkedintext{
    display: none;
}

#linkedinpica:hover + #linkedintext{
    display: block;
}
j3ff
  • 5,719
  • 8
  • 38
  • 51
DokiBaxxi
  • 1
  • 1
  • That is because the `+` selects the immediate sibling: but `#linkedinpica` and `#linkedintext` are not siblings of each other: their parents are siblings of each other. – Terry Apr 11 '20 at 00:40

1 Answers1

0

OK, the + symbol requires the two elements to have the same parent and for the second selector/sibling to be immediately after the first.

I would suggest changing the css to:

   #linkedintext {
     display: none;
   }

   #llinkedinrow:hover #linkedintext {
     display: block;
   }

This should give you the effect you are after but you should not really be using IDs for CSS selection (just bad practice).

JonC
  • 26
  • 2