忽略CSS悬停属性_Css - Fatal编程技术网

忽略CSS悬停属性

css

忽略CSS悬停属性,css,Css,有人知道为什么这不起作用吗？对于本例，将鼠标悬停在上方时，框应变为白色 <style type="text/css" media="screen"> .center { margin: 0 auto; } .box { width: 250px; height: 250px; display: block; background: #000; border:

有人知道为什么这不起作用吗？对于本例，将鼠标悬停在上方时，框应变为白色

<style type="text/css" media="screen">
    .center {
        margin: 0 auto;
    }
    .box {
        width: 250px; 
        height: 250px; 
        display: block;
        background: #000; 
        border: 1px solid white; 
        float: left
    }
    .inner {
        width: 175px; 
        height: 175px; 
        display: block; 
        margin-top: 15%; 
        margin-left: 15%; 
        background: #fff;
        position: relative
    }
    .boxLink {
        position: absolute; 
        left: 0; 
        right: 0; 
        margin-left: auto; 
        width: 100%; 
        text-align: center; 
        line-height: 175px; 
        font-size: 30px
    }  
    a:link.boxLink {
        color:#000; 
        background: yellow
    }
    a:visited.boxLink {
        color:#000; 
        background: yellow
    }
    a:hover.boxlink {
        color:#fff; 
        background: white
    }
    a:active.boxLink {
        color:#000; 
        background: green
    }
</style>
</head>
<body>
    <div id="container">
        <div class="box">
            <div class="inner">
                <a class="boxLink" href="#">about</a>
            </div>
        </div>
    </div>


.中心{
保证金：0自动；
}
.盒子{
宽度：250px；
高度：250px；
显示：块；
背景：#000；
边框：1px纯白；
浮动：左
}
.内部{
宽度：175px；
高度：175px；
显示：块；
利润率最高：15%；
左边距：15%；
背景：#fff；
职位：相对
}
.boxLink{
位置：绝对位置；
左：0；
右：0；
左边距：自动；
宽度：100%；
文本对齐：居中；
线高：175px；
字体大小：30px
}  
a:link.boxLink{
颜色：#000；
背景：黄色
}
a:boxLink{
颜色：#000；
背景：黄色
}
a:hover.boxlink{
颜色：#fff；
背景：白色
}
a:active.boxLink{
颜色：#000；
背景：绿色
}

您需要将类名放在

之前：悬停

：

a.boxLink:link{color:#000; background: yellow}
a.boxLink:visited{color:#000; background: yellow}
a.boxLink:hover {color:#fff; background: white}
a.boxLink:active {color:#000; background: green}

虽然我的建议是很好的实践，但实际上您在

悬停

行上出现了拼写错误：

 a.boxlink:hover {color:#fff; background: white}

CSS区分大小写，您需要将其设置为大写。

它确实有效。对于简化的测试用例，您似乎做了太多的简化。（你甚至没有犯过一个通常的错误，那就是把：visted样式放在cascade后面，然后是：hover样式）。为了澄清（因为代码中还有box元素）：只有链接会得到白色背景。这对我来说是有效的（在Mac OS X上的Chrome和Safari上进行了测试）。你在用什么浏览器？@Jacob，谢谢，现在我真的知道我需要睡觉了！啊!！我累了。谢谢有趣的是，其他的psedooclass使用了错误的格式。。只忽略了悬停。规范中哪里有这样的说明？或者你说的是特定浏览器中的bug？@David Dorward you's right说“简单选择器是类型选择器或通用选择器，后跟零个或多个属性选择器、ID选择器或伪类，顺序任意。”