CSS спрайт фон не сдвигается - PullRequest
Новая
       26

CSS спрайт фон не сдвигается

0 голосов
/ 17 декабря 2011

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

Вот мой HTML-код для двух округов(в моем исходном коде есть еще несколько округов) ... 

<ul id="counties">

<li id="russell"><a href="index.html">Russell</a></li>
<li id="smyth"><a href="index.html">Smyth</a></li>

</ul>

... и вот мой код CSS ... 

#counties {
background: url(./LINKS/counties_hover_map.png) no-repeat;
width: 750px;
height: 648px;
position: relative;
}
#counties li {list-style: none; display: block; position: absolute;}
#counties a {display: block; text-indent: -9999px; text-decoration: none;}

#russell {left: 244px; top: 112px; width: 161px; height: 56px;}
#russell a {height: 56px; border: none; outline: none;}
#russell a:hover{background-position: 0px -680px;}

#smyth {left: 510px; top: 164px; width: 144px; height: 56px;}
#smyth a {height: 56px; border: none; outline: none;}
#smyth a:hover {background-position: 0px -784px;}

... любые идеис благодарностью.Спасибо.

1 Ответ

0 голосов
/ 17 декабря 2011

удалить фон: url (./ LINKS / counties_hover_map.png) no-repeat;из ## округов,

добавьте эту строку вместо #counties a.

, чтобы она стала: 

    #counties {
    width: 750px;
    height: 648px;
    position: relative;
    }
    #counties li {list-style: none; display: block; position: absolute;}
    #counties a {
    display: block; text-indent: -9999px; text-decoration: none;
background: url(./LINKS/counties_hover_map.png) no-repeat;
}

    #russell {left: 244px; top: 112px; width: 161px; height: 56px;}
    #russell a {height: 56px; border: none; outline: none;}
    #russell a:hover{background-position: 0px -680px;}

    #smyth {left: 510px; top: 164px; width: 144px; height: 56px;}
    #smyth a {height: 56px; border: none; outline: none;}
    #smyth a:hover {background-position: 0px -784px;}
...