a：悬停background-postition问题

出于某种原因，我不完全确定为什么，但以下是不行的。背景位置在悬停时保持不变。我无法弄清楚为什么。我可以以另一种方式做到这一点，但我想尝试找到为什么它不起作用的底部。a：悬停background-postition问题

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

有谁知道这可能是导致此？

在此先感谢！

瑞恩

来源

2010-04-15 Ryan

这会让你尝试在其浏览器的区别吗？ – 2010-04-15 10:44:46

的ID选择了伪类选择优先..

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

要么使用！重要指令

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

，或使规则更加具体

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

来源

2010-04-15 10:48:40

不要使用'！重要的'作为CSS的锤子！ x_x – ANeves 2010-04-15 10:54:10

使用'！important'作为CSS锤子！ – Sliq 2013-02-14 10:16:39

#nav a#home和#nav a#about-us具有比#nav a:hover（ID>伪类）更高的特异性，因此后者从不施加。 #nav a#home:hover和#nav a#about-us:hover会在这里工作。

请参阅the cascade。

来源

2010-04-15 10:46:06

啊，是的，我现在完全明白。我应该知道的！谢谢。 – Ryan 2010-04-15 10:53:52

试试这个：

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

来源

2010-04-15 10:47:15 Paul

我知道这是不相关了，但如果有人将在这里得到一个如此有更多的选择：

更改标识的类。 Intead of <a id="home"> use <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>

来源

2013-06-27 18:54:52 MTs

a：悬停background-postition问题

回答

相关问题