a: проблема с наведением заднего фона - PullRequest
Новая
       25

a: проблема с наведением заднего фона

3 голосов
/ 15 апреля 2010

По какой-то причине я не совсем уверен, почему, но следующее не работает. Положение фона при наведении остается неизменным. Я не могу понять, почему. Я мог бы сделать это по-другому, но я хотел бы попытаться понять, почему это не работает. 

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

Кто-нибудь знает, что может быть причиной этого?

Заранее спасибо!

Ryan

Ответы [ 4 ]

7 голосов
/ 15 апреля 2010

Селекторы идентификаторов имеют приоритет над селекторами псевдоклассов.

Таким образом, правило # не будет отменено правилом :.

либо используйте директиву! Important 

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

или уточните правило 

#nav a#home:hover, #nav a#about-us:hover    {
    background-position:1px -15px;
}
3 голосов
/ 15 апреля 2010

#nav a#home и #nav a#about-us имеют более высокую специфичность, чем #nav a:hover (id> псевдокласс), поэтому последний никогда не применяется. #nav a#home:hover и #nav a#about-us:hover будут работать здесь.

См. каскад .

1 голос
/ 15 апреля 2010

Попробуйте это: 

#nav a#home:hover, #nav a#about-us:hover    {
    background-position:1px -15px;
}
0 голосов
/ 27 июня 2013

Я знаю, что это больше не актуально, но если кто-то сюда доберется, есть еще один вариант:

Изменить идентификаторы на классы. Intead of <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>
...