Question

任何人都可以解释为什么a：悬停不起作用？我已声明了它的ID，但它似乎仍无法正常工作。

 <!DOCTYPE html>
    <head>
        <style>
            #box1
            {
                width: 500px;
                height:300px;
                background-color: grey;
                border:4px solid pink;          
            }

            #id a:hover
            {
                z-index: 2;
                color:black;
                background-color: yellow;
                text-decoration: none;
            }

        </style>
    </head>     
    <html>
    <body>
    <h1 style="display:inline;padding-left:100px;padding-top:50px"> This is a heading</h1>
    <h2 style="display:inline-block;margin-left:10px;"> Another heading</h2>
    <div id="box1">
    <a id="link" href="http://google.com" style="position:block;letter-spacing:15px;margin-left:100px;
    font-size:50px;">GOOGLE</a>
    </body>
    </html>

Answer 1

您没有名为id的选择器。它被称为box1。改变这个：

#id a:hover
{
    z-index: 2;
    color:black;
    background-color: yellow;
    text-decoration: none;
}

到此：

#box1 a:hover
{
    z-index: 2;
    color:black;
    background-color: yellow;
    text-decoration: none;
}

这对我有用：http://jsfiddle.net/X6wWu/

Answer 2

@simpe答案是正确且有效的，你也可以通过

来完成

a#link:hover
            {
                z-index: 2;
                color:black;
                background-color: yellow;
                text-decoration: none;
            }

为什么a：在div内盘旋不工作？

2 个答案: