SitePoint Sponsor

User Tag List

Results 1 to 7 of 7

Hybrid View

  1. #1
    SitePoint Addict Scott Blanchard's Avatar
    Join Date
    Sep 2010
    Posts
    314
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Remove hover underlines from items nested in an anchor element

    In the markup example below, I'm using the anchor element to wrap the contents of the li. This gives me lots of flexibility for rollover effects and a large hit area to activate the link. However, one thing I'm struggling with is how to isolate the text color change and text-decoration hover behaviors so that they do not alter the contents of the "post-entry" paragraph element.

    HTML Code:
    <li>
    	<a href="#" rel="bookmark" class="post-title">Post Title here. I only want this text to be highlighted and underlined on :hover.
    		<span class="comment-count">0</span>
    		<p class="post-entry">
    			<img src="test.png" alt="" />
    			This is the post description text. I don't want it to respond to the hover css of the "post-title" element.
    		</p>
    	</a>
    </li>
    Here's the current css:

    Code:
    a.post-title:hover {color:blue;text-decoration:underline}
    a p.post-entry:hover{color:none !important;text-decoration:none !important}

  2. #2
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    This should do it...

    a.post-title:hover {color:blue;text-decoration:underline}
    a.post-title:hover p {color:#000;text-decoration:none;}

  3. #3
    SitePoint Addict Scott Blanchard's Avatar
    Join Date
    Sep 2010
    Posts
    314
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Eric, but I'm still getting underlines on the p elements. Were you able to successfully test this?

  4. #4
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    This should work. Having a hard time testing this on my ipad. You can't wrap a p in a a so I changed it to a span. No blocks inside anchors.

    <!doctype html><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>untitled</title>
    <style>
    a.post-title {color:blue;text-decoration:none}
    a.post-tile:hover .hover {text-decoration:underline}
    </style>
    </head>

    <body>

    <li>
    <a href="#" rel="bookmark" class="post-title"><span class="hover">Post Title here. I only want this text to be highlighted and underlined on :hover.</span>
    <span class="comment-count">0</span>
    <span class="post-entry">
    <img src="test.png" alt="" />
    This is the post description text. I don't want it to respond to the hover css of the "post-title" element.
    </span>
    </a>
    </li>

    </body>
    </html>

  5. #5
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,798
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    First I would like to point out that your markup is only valid with HTML5. So make sure that is your doc type

    Second, by giving the anchor text-decoration:underline you apply that to the element itself. so even if the children have text-decoration-none, the original element will still be underlined. As such my suggestion would be that you remove text decoration from the anchor and give it only to the children with you want underlined. BTW, 'color:none' is not a valid value for the color property. you may want to use rgba(0,0,0,0) or 'transparent'
    hope that helps.

  6. #6
    SitePoint Addict Scott Blanchard's Avatar
    Join Date
    Sep 2010
    Posts
    314
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    @dresden_phoenix, yes doctype is html5. Thanks for the reminder on that though.

    Also, appreciate the suggestion re: color:transparent. I just want the color unchanged without having to specify the previous color.

  7. #7
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    a.post-tile .hover {color:#000}


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
  •