a:hover problems

Stevie · May 8th, 2005, 02:07 PM

Hi

Im have a problem that i cannot resolved at all with CSS. I wish to use the a:hover command to change the colour, details of a button, but no matter which browser i try, the effect doesnt work.

The code is as follows:

.regbutton {
    font-size: 12px;
    background-color: #D6D3CE;
    font-family: Arial, Helvetica, sans-serif;
    background-image: url(Tab_Button.png);
    color: #FFFFFF;

}

a.regbutton:hover {
color:#FF0066;
background:blue;

}

Then i attach .regbutton as the class to my button

I would be most grateful if anybody could help me with this

Thanks
Steve

richard.york · May 8th, 2005, 02:23 PM

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en'>
        <head>
            <title></title>
            <style type='text/css'>
                a.regbutton {
                    font-size: 12px;
                    background-color: #D6D3CE;
                    font-family: Arial, Helvetica, sans-serif;
                    background-image: url(Tab_Button.png);
                    color: #FFFFFF;
                }
                a.regbutton:hover {
                    color:#FF0066;
                    background:blue;        
                } 
            </style>
        </head>
        <body>
            <a href='#' class='regbutton'>Test</a>
        </body>
    </html>

Are you doing something like the above? Which browser are you using, and what does the markup look like (just the relevant parts)?

Regards,
Rich

--
[http://www.smilingsouls.net]
Mail_IMAP: A PHP/C-Client/PEAR solution for webmail
Author: Beginning CSS: Cascading Style Sheets For Web Design

Stevie · May 8th, 2005, 04:15 PM

Hi

Thanks for replying.. Your very quick!!

Your example worked, when i incorporated into my code... however the problem seems to be
that it wont work for buttons

<input name="submit" type="submit" class='regbutton' value="Register">

underneath this line, i put your code example which worked fine, but the button wont adhere to it
Is this something to do with the button?

Thanks

Steve

richard.york · May 8th, 2005, 04:21 PM

Well, that reference in the style sheet only applies to links, it is written only to work on <a> elements that have a "regbutton" class name.

For a button you'll want to reference the <input> element, or remove any reference to any element and include only the class name. For instance:

Code:

                .regbutton {
                    font-size: 12px;
                    background-color: #D6D3CE;
                    font-family: Arial, Helvetica, sans-serif;
                    background-image: url(Tab_Button.png);
                    color: #FFFFFF;
                }
                .regbutton:hover {
                    color:#FF0066;
                    background:blue;        
                }

or

Code:

                input.regbutton {
                    font-size: 12px;
                    background-color: #D6D3CE;
                    font-family: Arial, Helvetica, sans-serif;
                    background-image: url(Tab_Button.png);
                    color: #FFFFFF;
                }
                input.regbutton:hover {
                    color:#FF0066;
                    background:blue;        
                }

Keep in mind however, that Explorer only supports the :hover pseudo-class on <a> elements. This example will only work in browsers that support putting :hover pseudo-classes on any element (Mozilla, Mozilla Firefox, Netscape, Opera, Safari, etc).

HTH!

Regards,
Rich

--
[http://www.smilingsouls.net]
Mail_IMAP: A PHP/C-Client/PEAR solution for webmail
Author: Beginning CSS: Cascading Style Sheets For Web Design

Stevie · May 8th, 2005, 04:30 PM

Thankyou... for being so so helpful.. I cant believe that you have responded with some great help very quickly.
I much apreciate it. Gonna try what you described now...