如何让我的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%; 
}

在哪些浏览器不工作？ – 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的;）

这适用于我的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 */ 
}

这对我来说，当我试着用你的完整代码。希望它为你工作:)

阿米特

答

造型链路的关键概念代表向下列步骤：

您必须声明风格的4个不同的条件它们是a:link,a:visited,a:hover,a:active。
你必须小心订单。因为它很重要。链接>访问>悬停>活动。（特别是有：悬停和：参观工作...）
尽管您不需要设计一个或多个条件的样式，但是，它们都是样式。

如果你注意这些，你可能有完美的风格的链接。

我希望它有帮助。

如何让我的CSS：悬停工作？

相关推荐