How to make text change colour, while hovering?

  • budogala

    (@budogala)


    11 years, 8 months ago

    Just a short question;
    How do I make a text change colour when hovering over it?

    Currently I’m using the following code;
    <span style=”color: #999999;”>Jujutsu</span>

    How do I edit it, so that it changes to red while hovering?

Viewing 1 replies (of 1 total)
  • Richard Aber

    (@richaber)

    11 years, 8 months ago

    You need some CSS styles with a :hover pseudo-class to handle that.

    For instance, assign a class of your own creation to your <span>, then in your css you can control the color attributes of that class. Here’s a off-the-cuff example…

    Example Markup:

    <span class='martial-arts'>Jujutsu</span>

    Example CSS Styling:

    .martial-arts {
    color: #999999;
}
.martial-arts:hover {
    color: #d62441;
}

    Depending on where and how your class is used, and how the styling of your theme and plugins are defined, you may need to increase the “specificity” of the selector for it to have the desired effect.

    Dev information about CSS specificity: https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

    Helpful human readable explanation of CSS specificity: http://css-tricks.com/specifics-on-css-specificity/

    Handy-dandy specificity calculator: http://specificity.keegan.st/

Viewing 1 replies (of 1 total)

The topic ‘How to make text change colour, while hovering?’ is closed to new replies.