Comment puis-je faire fonctionner mon css: hover?

Ci-dessous est mon css j'utilise. La div avec le grand bouton fonctionne dessus à l'exception de la stationnaire. Je voudrais qu'il change sa couleur de fond, mais je ne suis pas sûr pourquoi il ne fonctionne pas. Des idées?Comment puis-je faire fonctionner mon css: hover?

edit - Je travaille en FF pour le moment. Je ne cherche pas de support dans IE6, peut-être pas IE7 non plus.

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

modifier - fichiers complets

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%; 
}

Source

2010-09-12 Justin808

Sur quels navigateurs cela ne fonctionne-t-il pas? – BoltClock

Dans IE6 ': hover' ne fonctionnera que sur les ancres –

Eh bien, dans ce cas, il n'y a rien de mal avec cet extrait. Votre problème est probablement ailleurs. –

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

Je pense qu'il est un bug dans Firefox. Parfois, lorsque vous ajoutez des CSS pour des classes imbriquées sans spécifier à quels éléments elles sont appliquées, le navigateur devient fou. Votre code fonctionne bien dans d'autres navigateurs, si techniquement il est pas votre faute, mais FF de;)

Source

2010-09-12 02:36:13 mingos

Cela fonctionne avec mon HTML tel quel. J'ai aussi remarqué que j'avais oublié un doctype. L'ajouter le fait fonctionner sans ce changement. – Justin808

Possiblement FF mode bizarrerie alors;) – mingos

+1 bien repéré. –

Je vous propose cette solution:

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

Cela a fonctionné pour moi quand je l'ai essayé avec votre code complet. espérons que cela fonctionne pour vous :)

Amit

Source

2010-09-12 02:27:21 Amit

Le concept clé de styling un lien se vers les étapes suivantes:

Vous devez déclarer les styles de 4 conditions différentes qui sont a:link, a:visited, a:hover, a:active.
Vous devez faire attention à la commande. Parce que c'est important. lien> visité> hover> actif. (en particulier pour avoir: hover et: visité le travail ...)
Même si vous n'avez pas besoin de dénommer une ou plusieurs des conditions, néanmoins, les styler tous.

Si vous faites attention à ceux-ci, vous pouvez avoir des liens parfaitement stylés.

J'espère que ça aide.

Source

2010-09-12 02:51:50 scaryguy

Comment puis-je faire fonctionner mon css: hover?

Répondre

Questions connexes