CSS悬停属性被忽略

Question

Can anyone see why this isnt working? 谁能看到为什么这不起作用？ For this example the box should turn white when hovered over. 对于此示例，将鼠标悬停时该框应变为白色。

<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>

Answer 1

You need to put the class name before :hover : 您需要将类名称放在:hover 之前：

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}

While my suggestion is good practice, you actually made a spelling error on that hover line: 虽然我的建议是好的做法，但实际上您在该hover行上犯了一个拼写错误 ：

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

CSS is case-sensitive , you need to make that l uppercase. CSS 区分大小写 ，您需要将该l大写。

CSS悬停属性被忽略

问题描述

1 个解决方案

解决方案1
1 已采纳 2010-07-18 07:46:56

CSS悬停属性被忽略

问题描述

1 个解决方案

解决方案1 1 已采纳 2010-07-18 07:46:56

解决方案1
1 已采纳 2010-07-18 07:46:56