WordPress.org

Ready to get started?Download WordPress

Forums

Change text color on hover (3 posts)

  1. The Painted Hive
    Member
    Posted 2 years ago #

    Hi
    Newbie question, maybe an easy one?
    Is there a way to add an attribute to a text link within a blog post or page which will change the text color on hover?
    Site wide, I already have a default light blue for my links and light brown for the hover, however I am placing these particular links over a background image and the light colored text is getting lost.
    I changed the default light blue color of the link easily enough in the post editor, though this disabled the hover function. Ideally I would like the text color to change on hover so readers can see which link they are on.
    I know there are ways to do this in the stylesheet though I'm just learning so if anyone knows if it's achievable within the post editor itself that would be great. I thought there might be a "hover" attribute or something?
    Anyways, here is my current code:

    <div style="background-image: url('http://myimage.png'); background-repeat: no-repeat; height: 228px; width: 565px; margin-top: 0px;">
    <p style="padding: 175px 0px 0px 30px; font-family: courier new; font-size: 11px; line-height: normal;"><span style="color: #473d33;"><a href="http://google.com"><span style="color: #473d33;">First Link</span></a></span></p>
    <p style="padding: 0px 0px 0px 30px; font-family: courier new; font-size: 11px; line-height: normal;"><span style="color: #473d33;"><a href="http://google.com"><span style="color: #473d33;">Second Link</span></a></span></p>

    Anyone know if it's possible to insert some magical code for the hover?
    Thanks

  2. Digital Raindrops
    Member
    Posted 2 years ago #

    I know there are ways to do this in the stylesheet though I'm just learning

    Adding to the stylesheet is much easier than inline styles.

    You could give the div a 'class' and style the class in the stylesheet instead of inline, so the div would start like

    <div class="my-class">

    Then in style.css you might have something like (you might need a nested class if it was inside a content div)

    .content .my-class,
    .my-class {
       background: url(images/myimage.png) no-repeat;
    }
    .content .my-class a:focus,
    .content .my-class a:active,
    .content .my-class a:hover,
    .my-class a:focus,
    .my-class a:active,
    .my-class a:hover {
       color: #00ff00;
    }

    Could also add:

    .my-class p a:focus,
    .my-class p a:active,
    .my-class p a:hover {
       color: #00ff00;
    }

    And style the 'p' element in the stylesheet

    .content .my-class p,
    .my-class p {
       margin: 5px 10px;
       color: #ff0000;
    }

    Another option is to use the post_class(), I did post on this a week or so ago, the post class might be the "way to go", you may want to check it out!
    HTH

    David

  3. The Painted Hive
    Member
    Posted 2 years ago #

    Thanks.

Topic Closed

This topic has been closed to new replies.

About this Topic