Создание CSS Sprite: наведите указатель мыши на ссылку на изображение

Question

У меня есть вопрос, на который я надеюсь получить ответ. Я пытаюсь создать сайт с нуля (не используя Dreamweaver, Expression Web и т. Д.), Я использую только блокноты. То, что я пытаюсь выполнить, заключается в создании двух навигационных ссылок в качестве прокрутки CSS-спрайтов (с использованием элемента Pseudo-class: hover) в теге, который я бы хотел переместить по странице позже. Я потратил всю прошлую неделю на то, чтобы решить эту проблему без успеха. Я был на www.w3schools.com и на этом сайте, чтобы найти решение, но все еще не могу заставить его работать правильно. Я также в строгой среде, которая позволяет мне использовать только один браузер (IE8) на ОС Win7. Прошу прощения за мою паршивую CSS-кодировку; это мой первый выход.

В настоящее время я использую две ссылки, как показано ниже в HTML:

<div id="linkbox"> 
<ul class="GoogleFrame"> 
<li class="Google"><a href="www.google.com"></a></li> 
</ul> 
<ul class="BingFrame"> 
<li class="Bing"><a href="www.bing.com"></a></li> 
</ul> 
</div> 

Вот CSS я использую с выше HTML:

#linkbox { 
    width: 312px; 
    height: 388px; 
    background: url('images/container.png'); 
    padding: 0px; 
    margin: 0px; 
    position: fixed; 
    left: 0px; 
    top: 410px; 
    z-index: 1 
} 

.GoogleFrame { 
    position:fixed; 
    left: 10px; 
    top: 100px 
} 

.GoogleFrame li { 
    list-style:none; 
    position:absolute; 
} 

.GoogleFrame li, .GoogleFrame a { 
    height:54px; 
    display:block; 
} 

.Google { 
    left:0px; 
    width:260px; 
    background: url('images/google.png') 0px 0px; 
} 

.Google a:hover { 
    background: url('images/google.png') -261px 0px; 
} 

Любая помощь или руководство будет очень ценим!

Answer 1

Для CSS спрайтов изображений, вы можете сделать что-то вроде этого:

HTML

<ul> 
    <li> 
     <a href="#">text</a> 
    </li> 

    <li> 
     <a href="#">text</a> 
    </li> 

    <li> 
     <a href="#">text</a> 
    </li> 
</ul> 

CSS

ul {width:100px;} 
li { margin-bottom:5px; } 
li a { 
    text-indent:-9999em; /* hide our text */ 
    display:block; 
    height:40px; 
    background:url('http://placekitten.com/100/80') no-repeat 0 0; 
} 

li a:hover { background-position:0 -40px;} 

JSFiddle Demo

Идея заключается в том, что у вас есть 1 изображение, и вы показываете половину, а затем с помощью :hover вы можете изменить background-position изображения, чтобы показать on/off государству

Answer 2

@Nick ¨R

Спасибо Ник! Я последовал за ваши примеры из вышеупомянутых JSFIDDLES и нашел решение моей проблемы по ниже следующим образом:

HTML

<ul> 
<li class="Google"> 
    <a href="#">Google</a> 
</li> 
<li class="Bing"> 
    <a href="#">Bing</a> 
</li> 
</ul> 

CSS

ul { 
    width:260px; 
    position: fixed; 
    left: 1px; 
    top: 200px; 
    z-index: 1 
} 

li { 
    margin-bottom:5px; 
} 

li a { 
    text-indent:-9999em; /* hide our text */ 
    display:block; 
    height:44px; 
} 

li.Google a { 
    background: url('images/google.png') 0px 0px; 
    no-repeat 0 0; 
} 

li.Google a:hover { 
    background-position: -260px 0px; 
} 

li.Bing a { 
    background: url('images/google.png') -520px 0px; 
    no-repeat 0 0; 
} 

li.Bing a:hover { 
    background-position: -779px 0px; 
} 

Еще раз спасибо! thumbs up