Problem in hover

Discussion in 'CSS' started by omid kosravifar, Nov 8, 2015.

0
  1. #1
    Hello
    I have a problem in hover !!
    I write small code to test "hover"
    But unfortunately this code does not work correctly.
    Please guide me what is problem of bellow codes?
    Thank you.


    <!doctype html>
    <html>
    <head>
    <style>
    p{display:none;}
    a:hover p{display:block;}
    </style>
    </head>
    <body>
    <a href="#">Home</a>
    <p class="test3">This is my test </p>
    </body>
    </html>
     
    omid kosravifar, Nov 8, 2015 IP
  2. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #2
    The p element is a sibling of the a element, not a descendant.

    cheers,

    gary
     
    kk5st, Nov 8, 2015 IP
  3. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #3
    As @kk5st said, it's a sibling, not a child of it. Whilst technically HTML 5 says you could just make the anchor wrap the paragraph, I've found that to be unreliable in practice, you'd ALMOST think that would be invalid HTML in all prior specifications or something. OH WAIT, IT WAS!

    The "+" adjacent sibling selector should do the job:
    a:hover+p {display:block;}

    In modern browsers -- that's the rub. Anything earlier than IE7 wont' support it; but really most people have dropped supporting IE6 or earlier so you should be fine on that count.
     
    deathshadow, Nov 8, 2015 IP