贝娄是我正在使用的CSS。带有大按钮类的div可以使用悬停除外。我希望它改变它的背景颜色,但我不确定它为什么不起作用。有什么想法吗?
编辑 - 我目前正在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%;
}
答案 0 :(得分:1)
我建议这个解决方案:
.top .largebutton:hover
{
background-color: #9999FF; /* make this whatever color it was before */
}
当我用完整的代码尝试它时,这对我有用。 希望它适合你:)
阿米特
答案 1 :(得分:1)
div.top div.bottombar div.largebutton:hover
{
background-color: #9999FF;
}
我认为这是Firefox中的一个错误。有时,当您为嵌套类添加CSS而不指定应用这些元素时,浏览器会变得疯狂。你的代码在其他浏览器中运行正常,所以从技术上讲,这不是你的错,而是FF的;)
答案 2 :(得分:0)
建立链接样式的关键概念是以下步骤:
a:link
,a:visited
,a:hover
,a:active
。如果你注意这些,你可能会有完美的链接。
我希望它有所帮助。