SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member
    Join Date
    Nov 2013
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Hide link decoration in paragraph until hover whole paragraph (or div container)?

    If you have a Google Plus account, you'll see that if a post has a link in it, it won't change color until you over the whole div container, not just the link. How would I got about doing this? I'll be applying to my Tumblr theme I am creating. Thanks.

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,331
    Mentioned
    463 Post(s)
    Tagged
    8 Thread(s)
    Hi erraticfox. Welcome to the forums.

    You can do things like div:hover {} in CSS. Here's an example:

    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <style media="all">
    
    div {width: 300px; min-height: 150px; background: #f7f7f7; padding: 20px;}
    div:hover {background: #e7e7e7;}
    a {text-decoration: none; color: red;}
    a:hover, a:focus {text-decoration: underline; color: blue;}
    div:hover a {color: blue;}
    
    </style>
    </head>
    <body>
    
    <div>
        <h1>Heading</h1>
        <p>This is a paragraph <a href="">with a link in it</a></p>
    </div>
    
    </body>
    </html>


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •