Question

谁能明白为什么这不起作用？对于这个例子，当盘旋时，盒子应该变成白色。

<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

您需要在 :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}

虽然我的建议很好，但您确实在hover行上发出拼写错误：

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

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

CSS悬停属性被忽略

1 个答案: