Support » Fixing WordPress » How change the colour of letters by passing by with mouse?

  • Hi everyone!
    I’ve got a question!
    You may have seen in many websites (for example that) when you pass over some text with mouse they change their colour! Can you please give me a code (HTML, Javascript etc.) or something so I can do that too with some of my text!!!

    I will really appreciate your answer!!!

    Peter P

Viewing 3 replies - 1 through 3 (of 3 total)
  • Hi Peter,

    I am not sure if what you are mentioning is it Hover Mouse Over. You need to edit your template stylesheet CSS to get the effect. If this is not enough help, maybe you can try google for “CSS hover mouse over”

    <style type="text/css">
    a:link { color: #0000ff;}
    a:visited { color: #000000;}
    a:hover { color: #CCCCCC;
      background-color: #f06040;
      text-decoration: none;
    a:active { color: #333333;}

    You probably will need to change a CSS file. If you are talking about links, look for something with ‘a:hover’ which changes the ‘< a >’ tag with the links:

    ‘a:hover {
    background: #a6eda7;
    font-size: 12px;
    font-weight: bold;
    float: left;
    color: black;
    text-decoration: none;
    display: block;
    height: 26px;
    line-height: 26px;
    padding: 0 15px;
    overflow: hidden;

    Modify the color: black; to change the text color.

    It looks like that on the website that you linked to in your post above that the only text that changes are links. So you can use the a:hover pseudo class.

    Howsoever, if you wish to change the colour of plain text when hovering,then you can create something like p:hover or an in-line style and assign a pseudo hover to it so that it will change text colour when mousing over.

    Gad, I’m tired and my grammar is shot all to heck …

    Have a look at My Site and scroll down to “Poem About Cats” and try mousing over (hovering over) each paragraph.

    Here is the post entry:

    <p class="magnify">And God asked the feline spirit<br />
    Are you ready to come home?<br />
    Oh, yes, quite so, replied the precious soul<br />
    And, as a cat, I am most able<br />
    To decide anything for myself<br class="clear"></p>
    <p class="magnify">Are you coming then? asked God.<br />
    Soon, replied the whiskered angel<br />
    But I must come slowly.<br />
    For my human friends are troubled.<br />
    For you see, they need me, quite certainly.</p>
    <p class="magnify">But don’t they understand? asked God<br />
    That you’ll never leave them?<br />
    That your souls are intertwined for all eternity?<br />
    That nothing is created or destroyed?<br />
    It just is…forever and ever and ever.</p>
    <p class="magnify">Eventually they will understand,<br />
    Replied the glorious cat.<br />
    For I will whisper into their hearts<br />
    That I am always with them<br />
    I just am…forever and ever and ever.</p>
    <p>Author Unknown</p>

    And here is the CSS entry:

    .magnify:hover {font-size: x-large; color: red;}
Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘How change the colour of letters by passing by with mouse?’ is closed to new replies.