Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 11 of 11
  1. #1
    New Coder
    Join Date
    Nov 2011
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts

    First Letter Color change on hover

    Hello, I am trying to make a menu in HTML/CSS, and I want to change the color of the first letter when I hover

    My current HTML:

    PHP Code:
    <ul id="nav">
    <
    li><a href="#">Home</a></li>
    <
    li><a href="#">Projects</a></li>
    <
    li><a href="#">About</a></li>
    </
    ul
    So I want is to change the color the H, P & A when I hover them.

    How chan I achieve this?

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,485
    Thanks
    6
    Thanked 981 Times in 954 Posts
    Try this:
    Code:
    #nav a:hover:first-letter {color: red;}
    I haven’t tested it, though.

  • #3
    New Coder
    Join Date
    Nov 2011
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I just tried it out but unfortunately it doesn't work

    Here is what it will spit out http://acozan.com/test.html

  • #4
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,485
    Thanks
    6
    Thanked 981 Times in 954 Posts
    Sorry, :first-letter obviously only works on block elements so if you make your links display as block then it works.

  • #5
    New Coder
    Join Date
    Nov 2011
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts
    PHP Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <
    html xmlns="http://www.w3.org/1999/xhtml">
    <
    head>
    <
    style type="text/css">
    #nav a {display: block;}
    #nav a:hover:first-letter {color: red;}
    </style>
    </
    head>
    <
    body>
    <
    ul id="nav">
        <
    li><a href="#">Home</a></li>
        <
    li><a href="#">Projects</a></li>
        <
    li><a href="#">About</a></li>
    </
    ul>  
    </
    body>
    </
    html
    With this code, it still does not work http://acozan.com/test.html

  • #6
    Regular Coder Amphiluke's Avatar
    Join Date
    Jul 2009
    Posts
    312
    Thanks
    3
    Thanked 89 Times in 89 Posts
    Try this:
    Code:
    #nav li:hover:first-letter { color:red; }
    Hmm. Sorry, it works only in IE and Opera.
    Last edited by Amphiluke; 11-20-2011 at 02:37 PM.
    I am still learning English

  • #7
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,680
    Thanks
    0
    Thanked 230 Times in 225 Posts
    Hi there RNorskov,

    This works in Firefox 8, IE9 and Opera 11.52...
    Code:
    
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <meta name="language" content="english"> 
    <meta http-equiv="Content-Style-Type" content="text/css">
    
    <title></title>
    
    <style type="text/css">
    #nav a {
        display:block;
        color:#000;
     }
    #nav a:first-letter{
        color:inherit;
     }
    #nav a:hover:first-letter{
        color:#f00;
     }
    </style>
    
    </head>
    <body>
    
    <ul id="nav">
     <li><a href="#">Home</a></li>
     <li><a href="#">Projects</a></li>
     <li><a href="#">About</a></li>
    </ul>
    
    </body>
    </html>
    
    .... but not in Safari 5.1.
    As Google Chrome also uses webkit, I would presume it would not work in that browser either.

    So for cross-browser compatibility, it may be safer to use this code instead...
    Code:
    
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <meta name="language" content="english"> 
    <meta http-equiv="Content-Style-Type" content="text/css">
    
    <title></title>
    
    <style type="text/css">
    #nav a {
        color:#000;
     }
    #nav a:hover span{
        color:#f00;
     }
    </style>
    
    </head>
    <body>
    
    <ul id="nav">
     <li><a href="#"><span>H</span>ome</a></li>
     <li><a href="#"><span>P</span>rojects</a></li>
     <li><a href="#"><span>A</span>bout</a></li>
    </ul>
    
    </body>
    </html>
    
    coothead

  • #8
    New Coder
    Join Date
    Nov 2011
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thank you so much, I tell tell the first solution does work in chrome despite its webkit, but I went with the second solution so it would work in safari.

    Thank you so much for your help you saved my day

  • #9
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,680
    Thanks
    0
    Thanked 230 Times in 225 Posts
    No problem, you're very welcome.

  • #10
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,485
    Thanks
    6
    Thanked 981 Times in 954 Posts
    I’m sorry, I have no idea why it was working before but isn’t now. But trying it again, for me in Firefox it is working if you set the list items and the links to display: block;. No need for a redundant span element.

  • #11
    New Coder
    Join Date
    Nov 2011
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts
    PHP Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <
    html xmlns="http://www.w3.org/1999/xhtml">
    <
    head>
    <
    style type="text/css">
    #nav a  {display: block;}
    #nav li {display: block;}
    #nav a:first-letter:hover {color: red;}
    </style>
    </
    head>
    <
    body>
    <
    ul id="nav">
            <
    li><a href="#">Home</a></li>
            <
    li><a href="#">Projects</a></li>
            <
    li><a href="#">About</a></li>
     
    </
    ul>  
    </
    body>
    </
    html
    Doesn't work for me either


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •