WordPress.org

Ready to get started?Download WordPress

Forums

link background color on hover/rollover? (4 posts)

  1. xmiinc
    Member
    Posted 9 years ago #

    I've come across a number of sites lately that employ the effect of highlighting the link text, instead of the traditional underline-on-hover. I'm using the default template in WP1.5...
    1) How is the done? Do I add a CSS attribute by hand, or is this some javascript? (the DW CSS editor just toggles a non-hover text 'highlight')

    Thanks

  2. Michael Bishop

    Posted 9 years ago #

    CSS.

    a:hover {
    background-color: #####;
    }
    An online primer on CSS
    CSS Properties

  3. xmiinc
    Member
    Posted 9 years ago #

    Tried that already. In the following format it gives me constant color of link-text (plus, the color goes clear across the width of the resident column.). I want it to appear on hover, and only using the width of the link-text.

    h2, h2 a, h2 a:hover, h2 a:visited, h3, h3 a, h3 a:hover, ...etc {
    text-decoration: none;
    background-color:#06c;
    }

    Thanks.

  4. xmiinc
    Member
    Posted 9 years ago #

    Got it. miklb gave me the right info, I just put it in the wrong place. I'm being forced into being quite the css-hound figgering all this stuff out! For those looking to do the same, you need to place the 'background-color:#xxxxx' attribute where ONLY the hover case is being affected. If you put it just anywhere you see :hover (as in my previous post), it affects all those other "cases" and not just the hover case. (Lesson learned!) The further lesson learned is: if you don't already have a specific case (ie. :hover only) broken down by itself, as miklb's post shows, you can write it in yourself. Just remember: if you do that, watch for overriding, depending on the case-attribute pair you're looking to affect.

    cheers!

Topic Closed

This topic has been closed to new replies.

About this Topic