a:hover 背景位置问题

Posted 2023-05-08

【中文标题】a:hover 背景位置问题

【英文标题】：a:hover background-postition problem

【发布时间】：2011-02-08 07:48:52

【问题描述】：

出于某种原因，我不完全确定原因，但以下方法不起作用。背景位置在悬停时保持不变。我不知道为什么。我可以用另一种方式来做，但我想尝试找出它为什么不起作用的原因。

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

有人知道是什么原因造成的吗？

提前致谢！

瑞恩

【问题讨论】：

您在哪个浏览器上试用会有所不同吗？

【参考方案1】：

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

因此# 规则不会被: 规则覆盖..

要么使用 !important 指令

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

或者让规则更具体

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

【讨论】：

不要将! important用作CSS锤子！ x_x

请使用!important 作为 CSS 锤子！

【参考方案2】：

#nav a#home 和#nav a#about-us 比#nav a:hover 具有更高的特异性（id > 伪类），因此永远不会应用后者。 #nav a#home:hover 和 #nav a#about-us:hover 可以在这里工作。

见the cascade。

【讨论】：

啊，是的，我现在完全明白了。我早该知道的！谢谢。

【参考方案3】：

试试这个：

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

【参考方案4】：

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

将 ID 更改为类。 不是<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>