Question

出于某种原因，我不完全确定原因，但以下情况不起作用。悬停时背景位置保持不变。我无法弄清楚为什么。我可以用另一种方式做到，但我想尝试找到它为什么不起作用的底部。

#nav a:link, #nav a:visited {
    background:url(../img/nav-sprite.png) no-repeat;
    display:block;
    float:left;
    height:200px;
    padding:10px;
    text-indent:-9999px;
    border:solid 1px red;
}

    #nav a#home {
        background-position:-10px 0px;
        width:30px;
    }
    #nav a#about-us {
        background-position:-85px 0px;
        width:45px;
    }

#nav a:hover    {
    background-position:1px -15px;
}

有人知道是什么原因引起的吗？

提前致谢！

赖安

Answer 1

ID选择器优先于伪类选择器..

因此#规则不会覆盖:规则。

使用！important指令

#nav a:hover    {
    background-position:1px -15px!important;
}

或使规则更具体

#nav a#home:hover, #nav a#about-us:hover    {
    background-position:1px -15px;
}

Answer 2

#nav a#home和#nav a#about-us的特异性高于#nav a:hover（id＆gt;伪类），因此后者永远不会应用。 #nav a#home:hover和#nav a#about-us:hover可以在此处使用。

请参阅the cascade。

Answer 3

试试这个：

#nav a#home:hover, #nav a#about-us:hover    {
    background-position:1px -15px;
}

Answer 4

我知道它不再相关了，但如果有人会到这里，那么还有一个选择：

将Ids更改为Classes。 <a id="home">的整数使用<a class="home">。现在将您的样式从a#home更改为a.home，这样就可以了。

完整代码：

<div id="nav">
    <a href="#" class="home">Home</a>
    <a href="#" class="about-us">About Us</a>
</div>

<style>
        #nav a:link, #nav a:visited
        {
            background: url('smile-icon.jpg') no-repeat;
            display: block;
            float: left;
            height: 140px;
            padding: 10px;
            text-indent: -9999px;
            border: solid 1px red;
        }

        #nav a.home
        {
            background-position: -10px 0px;
            width: 30px;
        }

        #nav a.about-us
        {
            background-position: -85px 0px;
            width: 45px;
        }

        #nav a:hover
        {
            background-position: 1px -15px;
        }
    </style>

a：悬停背景位置问题

4 个答案: