tags:

views:

67

answers:

3
+1  Q: 

How can I make my css :hover work?

Bellow is my css i'm using. The div with the largebutton class on it works with the exception of the hover. I would like it to change it's background color, but am not sure why its not working. Any ideas?

edit - I'm working in FF at the moment. I'm not looking for support in IE6, possibly not IE7 either.

.top .bottombar .largebutton
{
    position: relative;
    float: left;
    height: 100%;
    width: 195px;
    font-size: 13px;
    letter-spacing: 1px;
    text-transform:uppercase;
    line-height: 33px;
    text-align: right;
    background-color: #99CCFF;
    margin-left: 5px;
    padding-right: 5px;
    overflow: hidden;
    cursor: pointer;
}

.top .bottombar .largebutton:hover
{
    background-color: #9999FF;
}

edit - Full files

HTML

<html>
    <head>
        <link rel="StyleSheet" href="css/LCARS.css" type="text/css" media="screen">
    </head>
    <body>
        <div class="top">
            <div class="content">
            </div>
            <div class="leftbuttonbox">
                <div class="button">
                Label
                </div>
                <div class="largebutton">
                Label
                </div>
                <div class="button">
                Label
                </div>
            </div>
            <div class="bottombar">
                <div class="button">
                Label
                </div>
                <div class="largebutton">
                Label
                </div>
                <div class="button">
                Label
                </div>
                <div class="label">
                    This is a label, it grows as large as it needs to
                </div>
            </div>
            <div class="cap">
                <div class="capinner">
                </div>
            </div>
        </div>
    </body>
</html>

CSS

@font-face {
    font-family: "LCARS";
    src: url('../FONT/lcars.ttf');
}

body
{
    font-family: "LCARS";
    position: relative;
    background-color: black;
    padding: 0px;
    margin: 0px;
}

.top
{
    position: relative;
    height: 220px;
    min-width: 100px;
    margin-top: 5px;
    margin-left: 5px;
    margin-right: 5px;
    background-color: #6666FF;
    -moz-border-radius-bottomleft: 50px;
}

.top .content
{
    position: absolute;
    top: 0px;
    right: 0px;
    left: 100px;
    bottom: 25px;
    background-color: black;
    -moz-border-radius-bottomleft: 25px;
}

.top .leftbuttonbox
{
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100px;
    bottom: 60px;
    background-color: black;
    overflow: hidden;
}

/*
 * the button is 1/2 the size of the large button
 * the button box can hold 4 buttons or 2 large
 * buttons or any combination of equal size
 */
.top .leftbuttonbox .button
{
    position: relative;
    height: 35px;
    width: 95px;
    font-size: 13px;
    letter-spacing: 1px;
    text-transform:uppercase;
    line-height: 53px;
    text-align: right;
    background-color: #99CCFF;
    margin-bottom: 5px;
    padding-right: 5px;
    overflow: hidden;
    cursor: pointer;
}

.top .leftbuttonbox .button:hover
{
    background-color: #9999FF;
}

.top .leftbuttonbox .largebutton
{
    position: relative;
    height: 75px;
    width: 95px;
    font-size: 13px;
    letter-spacing: 1px;
    text-transform:uppercase;
    line-height: 133px;
    text-align: right;
    background-color: #99CCFF;
    margin-bottom: 5px;
    padding-right: 5px;
    overflow: hidden;
    cursor: pointer;
}

.top .leftbuttonbox .largebutton:hover
{
    background-color: #9999FF;
}

.top .bottombar
{
    position: absolute;
    bottom: 0px;
    height: 25px;
    left: 200px;
    padding-right: 5px;
    background-color: black;
    overflow: hidden;
}

.top .bottombar .button
{
    position: relative;
    float: left;
    height: 100%;
    width: 95px;
    font-size: 13px;
    letter-spacing: 1px;
    text-transform:uppercase;
    line-height: 33px;
    text-align: right;
    background-color: #99CCFF;
    margin-left: 5px;
    padding-right: 5px;
    overflow: hidden;
    cursor: pointer;
}

.top .bottombar .button:hover
{
    background-color: #9999FF;
}

.top .bottombar .largebutton
{
    position: relative;
    float: left;
    height: 100%;
    width: 195px;
    font-size: 13px;
    letter-spacing: 1px;
    text-transform:uppercase;
    line-height: 33px;
    text-align: right;
    background-color: #99CCFF;
    margin-left: 5px;
    padding-right: 5px;
    overflow: hidden;
    cursor: pointer;
}

.top:hover .bottombar:hover .largebutton:hover
{
    background-color: #9999FF;
}

.top .bottombar .label
{
    position: relative;
    float: left;
    height: 100%;
    min-width: 50px;
    font-size: 22px;
    letter-spacing: 1px;
    font-variant: small-caps;
    padding-left: 5px;
    padding-right: 5px;
    background-color: #CC99CC;
    margin-left: 5px;
    cursor: default;
}

.top .cap
{
    position: absolute;
    height: 25px;
    width: 20px;
    right: 0px;
    bottom: 0px;
    padding-left: 5px;
    padding-right: 5px;
    background-color: black;
    cursor: default;
}

.top .cap .capinner
{
    position: relative;
    height: 100%;
    width: 100%;
    background-color: #6666FF;
    cursor: default;
    -moz-border-radius-topright: 50%;
    -moz-border-radius-bottomright: 50%;
}
A: 

I suggest this solution:

.top .largebutton:hover
{
    background-color: #9999FF; /* make this whatever color it was before */
}

This worked for me when I tried it with your full code. Hope it works for you :)

Amit

Amit  2010-09-12 02:27:21
+1  A:  
div.top div.bottombar div.largebutton:hover
{
    background-color: #9999FF;
}

I think it's a bug in Firefox. Sometimes, when you add CSS for nested classes without specifying what elements these are applied to, the browser goes crazy. Your code works OK in other browsers, so technically it's not your fault, but FF's ;)

mingos  2010-09-12 02:36:13
This works with my HTML as is. I also noticed I forgot a doctype. Adding it makes it work without this change.<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Justin808  2010-09-12 02:40:56
Possibly FF quirks mode oddity then ;)
mingos  2010-09-12 02:42:21
+1 well spotted.
Tor Valamo  2010-09-12 02:54:43
A: 

Hi,

The key concept of styling a link stands toward following steps:

  1. You have to declare styles of 4 different condition which are a:link , a:visited , a:hover , a:active .
  2. You have to be careful about the order. Because it matters. link > visited > hover > active. (especially to have :hover and :visited work...)
  3. Eventhough you don't need styling one or more of conditions, nevertheless, style them all.

If you pay attention to these, you may have perfectly styled links.

I hope it helps.

scaryguy  2010-09-12 02:51:50

related questions

IE7 HTML/CSS margin-bottom bug.
IE7: header above menu
How to create an all browser-compatible hanging indent style in CSS in a span
How can you customize the numbers in an ordered list?
style.display not working in Firefox, Opera, Safari - IE7 OK
Best WYSIWYG CSS editor?
How important is W3C XHTML/CSS validation when finalizing work?
Solve the IE select overlap bug
IE8 overflow:auto with max-height
Autosizing Textarea
What is the best way to create rounded corners using CSS?
FF3 WinXP != FF3 Ubuntu - why?
Is there a business reason for striving for pure CSS layout?
How to set up a CSS switcher in ASP.NET
Setting a div's height in HTML with CSS
Wrapping lists into columns
CSS Background Color in Javascript
How can I make the browser see CSS and Javascript changes?
What sites offer free, quality web site design templates?
Can you recommend a good CSS online resource or book?
Html CSS Editor
In HTML, how to word-break on a dash?
Detecting font in JavaScript
How do you test layout design across multiple browsers/OSs?
Why doesn't the percentage width child in absolutely positioned parent work in IE7?