View original (French)

"highlight" on hover over text

diddi776 -  
Bonjour,

I would like to know how to highlight text on hover with a color of my choice, like on the website "http://cuisine.journaldesfemmes.com"?

Configuration: Windows XP / Firefox 7.0.1

5 answers

  1. Anonymous user
    Hello,

    This is a CSS property.
    You need to wrap the text to be colored on hover in a tag.

    For example: 
    <span class="test">Here is some text to color on hover!</span>

    Then, in the CSS: 
    .test:hover { font-color:red; }

    The :hover indicates that the action will only be performed when hovering over anything with the class "test".
    I hope I answered your question; my CSS knowledge is starting to fade...
    Dying seriously harms your health.
    0
    1. diddi776
      Thank you for your responses,

      To be more precise, I want each character on my site to be highlighted in a different color, for example like on the site I provided (http://cuisine.journaldesfemmes.com) it is "highlighted" in pink.

      So I don't know if I can use in CSS: text-decoration and put overline like this:

      .test {
      text-decoration: overline;
      }

      to begin with
      0
      1. radgeur
        At that moment, just create the tag for each letter, with the appropriate CSS code.
        0
      2. Mihawk Contributor
        Can you tell me at what level of the site you see this, please?
        0
    2. Poivreblanc
      A simple Google search and you're done : 

      *::selection { background:#cc2a00; color:#fff; } *::-moz-selection { background:#cc2a00; color:#fff; } *::-webkit-selection { background:#cc2a00; color:#fff; }
      0
      1. radgeur
        Hello,
        For that, you need to put an event in your code.
        -1
        1. radgeur
          where we simply use PHP code ^^.
          0
        2. Mihawk Contributor
          Yuck, it's ugly and heavy: CSS does all that very well!
          0
      3. Mihawk Contributor
        Hi,

        Unfortunately, there is no CSS property for "highlighting" as such. You need to wrap the text you want to highlight in a "span" that you will give a background color on hover, using the CSS pseudo-class "hover".

        Here is an example of code to copy onto your computer, in a basic HTML file. It shows you how to use CSS combined with HTML to highlight a word when the mouse hovers over it. 

        <html> <head> <style> .surligneJaune:hover {background-color:yellow;} </style> </head> <body> <div> Here is a test text, and the following word is highlighted on hover: <span class="surligneJaune">dromedary</span>. </div> </body> </html>

        --
        Mihawk
        "As long as we don't try, we won't know."
        -1
        1. radgeur
          Yes, but at that moment, you put the CSS in another file.
          0
        2. Mihawk Contributor
          It depends if there's only one line, it's better to put it there. And especially how do you want me to post two files on the forum?
          Ah, the grudgers from -1 amaze me.
          0
        3. radgeur
          Yes, but you can't know that if there's only one; the author of the post would need to participate a bit to tell us more about what they want. To post two files, you can elaborate on that in your response.
          And what can you do, there are people like that, there's nothing we can do.
          0
        4. Mihawk Contributor
          The poster should come back first :)
          0
        5. radgeur
          It's not wrong ^^!
          0