link background color on hover/rollover?

  • 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

Viewing 3 replies - 1 through 3 (of 3 total)

  • CSS.

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

    Thread Starter xmiinc

    (@xmiinc)

    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.

    Thread Starter xmiinc

    (@xmiinc)

    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!

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘link background color on hover/rollover?’ is closed to new replies.