Wrox Programmer Forums
| Search | Today's Posts | Mark Forums Read
CSS Cascading Style Sheets All issues relating to Cascading Style Sheets (CSS).
Welcome to the p2p.wrox.com Forums.

You are currently viewing the CSS Cascading Style Sheets section of the Wrox Programmer to Programmer discussions. This is a community of software programmers and website developers including Wrox book authors and readers. New member registration was closed in 2019. New posts were shut off and the site was archived into this static format as of October 1, 2020. If you require technical support for a Wrox book please contact http://hub.wiley.com
 
Old May 8th, 2005, 02:07 PM
Authorized User
 
Join Date: May 2005
Location: , , .
Posts: 15
Thanks: 0
Thanked 0 Times in 0 Posts
Default a:hover problems

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
 
Old May 8th, 2005, 02:23 PM
richard.york's Avatar
Wrox Author
Points: 5,506, Level: 31
Points: 5,506, Level: 31 Points: 5,506, Level: 31 Points: 5,506, Level: 31
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jun 2003
Location: Camby, IN, USA.
Posts: 1,706
Thanks: 0
Thanked 6 Times in 6 Posts
Default

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
 
Old May 8th, 2005, 04:15 PM
Authorized User
 
Join Date: May 2005
Location: , , .
Posts: 15
Thanks: 0
Thanked 0 Times in 0 Posts
Default

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



 
Old May 8th, 2005, 04:21 PM
richard.york's Avatar
Wrox Author
Points: 5,506, Level: 31
Points: 5,506, Level: 31 Points: 5,506, Level: 31 Points: 5,506, Level: 31
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jun 2003
Location: Camby, IN, USA.
Posts: 1,706
Thanks: 0
Thanked 6 Times in 6 Posts
Default

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
 
Old May 8th, 2005, 04:30 PM
Authorized User
 
Join Date: May 2005
Location: , , .
Posts: 15
Thanks: 0
Thanked 0 Times in 0 Posts
Default

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...





Similar Threads
Thread Thread Starter Forum Replies Last Post
problems with getting Front Page 98’s hover button melon Access 0 July 6th, 2006 02:38 AM
ie vs. firefox menu/hover/width problems mishagos BOOK: Beginning CSS: Cascading Style Sheets for Web Design ISBN: 978-0-7645-7642-3 2 June 29th, 2006 08:02 AM
a: hover - style... elladi Dreamweaver (all versions) 2 August 3rd, 2004 06:48 AM
Description box, when hover on certain word. iniro Javascript How-To 5 July 29th, 2004 02:31 PM





Powered by vBulletin®
Copyright ©2000 - 2020, Jelsoft Enterprises Ltd.
Copyright (c) 2020 John Wiley & Sons, Inc.