View original (French)

"highlight" on hover over text

diddi776 -  
Mihawk Posted messages 4753 Status Contributor -
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
  2. 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 Posted messages 216 Status Member 27
       
      At that moment, just create the tag for each letter, with the appropriate CSS code.
      0
    2. Mihawk Posted messages 4753 Status Contributor 846
       
      Can you tell me at what level of the site you see this, please?
      0
  3. 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
  4. radgeur Posted messages 216 Status Member 27
     
    Hello,
    For that, you need to put an event in your code.
    -1
    1. radgeur Posted messages 216 Status Member 27
       
      where we simply use PHP code ^^.
      0
    2. Mihawk Posted messages 4753 Status Contributor 846
       
      Yuck, it's ugly and heavy: CSS does all that very well!
      0
  6. Mihawk Posted messages 4753 Status Contributor 846
     
    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 Posted messages 216 Status Member 27
       
      Yes, but at that moment, you put the CSS in another file.
      0
    2. Mihawk Posted messages 4753 Status Contributor 846
       
      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 Posted messages 216 Status Member 27
       
      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 Posted messages 4753 Status Contributor 846
       
      The poster should come back first :)
      0
    5. radgeur Posted messages 216 Status Member 27
       
      It's not wrong ^^!
      0