WordPress.org

Ready to get started?Download WordPress

Forums

How do I change my Original Post Color to Another Color with hover? (5 posts)

  1. concerns1234
    Member
    Posted 4 years ago #

    Hi,
    I'm having problems with doing hover text color. I've read a number of blogs which says to change it into something "a:hover". But I dont get it. I want to change my post title hover color. What Do I do to change the hover color?

  2. Derek
    Member
    Posted 4 years ago #

    Are you able to edit your theme stylesheet? It should be something like style.css in the main directory of your theme folder. If so, you need to edit, or add, the CSS pseudo-class a:hover and define a color.

    Here is an explanation from W3Schools, where you can even try it yourself from their site:

    http://w3schools.com/css/css_pseudo_classes.asp

    That site is a great start if you are looking for an introduction to CSS. Hope that helps!

  3. Derek
    Member
    Posted 4 years ago #

    One other thing I just thought about. You may want to view the source code of the page to see if the post title is a h1, h2, etc. It also may have another class or id associated with it. Your stylesheet may define it differently than just a generic a:hover.

  4. concerns1234
    Member
    Posted 4 years ago #

    Hi dleek,

    Thanks for your reply!

    I am able to edit the theme's stylesheet as it is a self-hosted WordPress blog. As you suggested, I have tried going to the style.css file and add a:hover and it worked!

    The post is an h2 element. Currently the post title is black and when I hover it turns to a tint of orange and what I want to do is invert it. For example, I want the tint of orange as the permanent color of the post and when it is hovered it should change to black.

    Any suggestion?

    Thanks for the help!

  5. Derek
    Member
    Posted 4 years ago #

    You should be able to swap the normal link/visited values with the hover color values. From the link above to W3Schools, you should see this:

    a:link {color:#FF0000}      /* unvisited link */
    a:visited {color:#00FF00}  /* visited link */
    a:hover {color:#FF00FF}  /* mouse over link */
    a:active {color:#0000FF}  /* selected link */

    Make sure you have each of them defined with the color values you wish to have. It seems like what you want would be #000000 for your hover state, and the orange for your link and visited states.

    Is there any other class associated with the h2 element? Do you have a link to your site?

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.