Change text color on hover

  • 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('https://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="https://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="https://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

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

  • 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

    Thread Starter The Painted Hive

    (@the-painted-hive)

    Thanks.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Change text color on hover’ is closed to new replies.