-1

Html Code

output- hover on name and the value displays beneath, atm its visible .top { font-family: 'Brush Script MT', cursive; font-size:50px; }

  .hid{
    align-content: center;
    padding:auto 0;
    margin:0;
    display:none;
  } 

.top:hover .hid
{
  color: red;
  display: block;
}

I checked other similar topics, tried the combinators like + and ~, still won't work.

please help. tia

Ash Sharma
  • 31
  • 6
  • 2
    Please share the html code also – Vishal Apr 20 '21 at 10:18
  • You need to set both p and hid: .top:hover .hid, .top:hover .hid p – Pauline Apr 20 '21 at 10:23
  • [Why not upload images of code/errors when asking a question?](https://meta.stackoverflow.com/questions/285551/why-not-upload-images-of-code-errors-when-asking-a-question) – CBroe Apr 20 '21 at 10:38
  • Please click on the text above, those added description to the image content. – Ash Sharma Apr 20 '21 at 10:52
  • @Pauline, your code looked promising after so many other tries, unfortunately still does not want to display the hidden content, changes color while hovering. Anything after .top:hove, even the colors dont change, only putting a comma and adding something changes the color but does not display. – Ash Sharma Apr 20 '21 at 10:55
  • aplologies, I added different images by mistake, corrected now – Ash Sharma Apr 20 '21 at 11:00

1 Answers1

0
  • remove +p cause you're hiding the entire .hid
  • and remove the + in .top:hover + .hid
  .top
  {
   font-family: 'Brush Script MT', cursive;
   font-size:50px;
  }
   
  .hid{
    display: float;
    align-content: center;
    padding:auto 0;
    margin:0;
    display:none;
  } 

.top:hover  .hid
{
  color: red;
  display: block;
}

you can check this https://jsfiddle.net/a178x59n/

AL.Sharie
  • 1,526
  • 1
  • 9
  • 14