Why is the pseudo-class :Hover not working?

Asked

Viewed 71 times

1

I have the following elements in my html <p id="p1">Passe o mouse sobre mim!</p> <p id="p2">Paragrafo</p>

And in my CSS I have `

P2

{ display: None; }

Q1:Room #P2

{ display: block; }`

When I pass the mouse over the first paragraph the second does not appear because ?

html

3 answers

4

Anderson’s answer is the right one, but just to clarify, the way you wrote it #p1:hover #p2 indicates that you are looking for the element #p2 within the element #p1, that is, this CSS indicates that #p1 is the father or ancestor of #p2, but in their HTML they are adjacent brothers, the #p1 is older brother of #p2.

I believe that this is not what you want, but following the logic of what I said above, if #p2 is inside #p1, the code will work. The detail is that like you can’t have a tag <p> into another. Then I put the <p> from within as a <span>, just as an example.

#p2 {
  display: none;
}

#p1:hover #p2 {
  display: block;
}
<p id="p1">Passe o mouse sobre mim!
    <span id="p2">Paragrafo</span>
</p>

  • 1

    A detail: in #p1 #p2, the element #p1 doesn’t have to be necessarily father of #p2, but to be the ancestor of #p2 on any level (father, grandfather, great-grandfather, etc). I think using the term "father" would be better just to be #p1 > #p2.

  • Hi was that same thanks helped a lot vlw, forgot the css combiners

  • @Andersoncarloswoss really, it does not need to be directly the father, it can be any ancestor, I edited there to be clearer, since I did not use the selector >

  • @Leandronascimento tmj my young

3

Because the selector you used in CSS does not agree with your structure in HTML. While doing #p1:hover #p2 you will be selecting the element #p2 that is descended of the element #p1, but in HTML the elements are siblings. To select sibling elements immediately in sequence, you must use the operator +, #p1:hover + #p2.

#p2 {
  display: none;
}

#p1:hover + #p2 {
  display: block;
}
<p id="p1">Passe o mouse sobre mim!</p>
<p id="p2">Paragrafo</p>

  • Hi thanks man!!! you helped me enough even thank you very heartPoxa spent almost a week trying to find the problem and had forgotten the css combiners, more worth even.

0

A comma was missing between the two ID’s there in the CSS declaration, the correct one would be like this: 

#p2 {
  display: none;
}

#p1:hover, #p2 {
  display: block;
}

But in this case it will depend a little on what you are trying to do, see if so suits you!

  • The @Andersoncarloswoss solution seems to be what you need, in case my Hover works, but only in #P1, in #P2, the feature is always active.

  • 3

    But it won’t do that #p2 appear when #p1 possess the Hover, because the element will always possess display: block and it wouldn’t even make sense to define it as none initially.

  • I agree, I had not committed myself to none there at the beginning! :-)

Browser other questions tagged html

You are not signed in. Login or sign up in order to post.