如何讓我的CSS：懸停工作？

貝婁是我使用的CSS。除了懸停之外，其上的大按鈕類的工作。我希望它改變它的背景顏色，但我不知道爲什麼它不起作用。有任何想法嗎？如何讓我的CSS：懸停工作？

編輯 - 我現在在FF工作。我不是在IE6中尋找支持，也可能不是IE7。

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

編輯 - 全文件

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

來源

2010-09-12 Justin808

在哪些瀏覽器不工作？ – BoltClock 2010-09-12 02:02:32

在IE6'：hover'只能在錨點上工作 – 2010-09-12 02:03:23

那麼在那種情況下，這段代碼沒有任何問題。你的問題可能在別處。 – 2010-09-12 02:08:34

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

我認爲這是在Firefox中的錯誤。有時，當您爲嵌套類添加CSS而未指定將這些元素應用於哪些元素時，瀏覽器會變得瘋狂。你的代碼在其他瀏覽器好，所以在技術上這不是你的錯，但FF的;）

來源

2010-09-12 02:36:13 mingos

這適用於我的HTML原樣。我也注意到我忘了文檔類型。添加它可以使它在沒有這種改變的情況下工 – Justin808 2010-09-12 02:40:56

可能FF怪癖模式古怪然後;） – mingos 2010-09-12 02:42:21

+1發現。 – 2010-09-12 02:54:43

我建議這個解決方案：

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

這對我來說，當我試着用你的完整代碼。希望它爲你工作:)

阿米特

來源

2010-09-12 02:27:21 Amit

造型鏈路的關鍵概念代表向下列步驟：

您必須聲明風格的4個不同的條件它們是a:link,a:visited,a:hover,a:active。
你必須小心訂單。因爲它很重要。鏈接>訪問>懸停>活動。（特別是有：懸停和：參觀工作...）
儘管您不需要設計一個或多個條件的樣式，但是，它們都是樣式。

如果你注意這些，你可能有完美的風格的鏈接。

我希望它有幫助。

來源

2010-09-12 02:51:50 scaryguy

如何讓我的CSS：懸停工作？

回答

相關問題