Как сделать CSS ролловер-изображение?(Спрайты) - PullRequest
Новая
       4

Как сделать CSS ролловер-изображение?(Спрайты)

3 голосов
/ 16 октября 2010

Я просто пытаюсь использовать этот маленький трюк, который я видел в одном из моих журналов по веб-дизайну, чтобы сделать небольшую смену изображений, но у меня небольшая проблема. Моя попытка была ужасной неудачей, лол. Я просто хочу увидеть верхнюю половину (высотой 42 пикселя), а затем нижнюю половину при переносе (очевидно, -42 пикселя)

ширина также 42px. Может ли кто-нибудь написать что-нибудь, чтобы это произошло? образ: http://img826.imageshack.us/img826/6568/homebi.png

Ответы [ 3 ]

3 голосов
/ 17 октября 2010

Это все о начальных (не :hover) и конечных (:hover) значениях background-position. 

#test {
    height: 42px;
    width: 42px;
    background-image: url(http://img826.imageshack.us/img826/6568/homebi.png);
    background-repeat: no-repeat;
    background-color: transparent;
    background-position: top;  /* <-- key step #1 */
}
#test:hover {
    background-position: bottom; /* <-- key step #2 */
}

Демо

Согласно вашему комментарию: обернуть <div> якорем (<a>), вот что нужно сделать:

  1. Поменяйте <div> на <span>. Это потому, что допустимые дочерние элементы якорей должны быть встроенными элементами
  2. Но встроенные элементы не будут работать, принимая размеры! Итак, исправьте эту новую проблему с помощью одного дополнительного свойства CSS: display: inline-block на span.

Демо 2

2 голосов
/ 16 октября 2010

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

<style type="text/css">
.menu {
}
.menu a {
    float: left;
    display: inline;
    width: 42px;
    height: 42px;
    text-decoration: none;
}
.menu a span {
    display: block;
    overflow: hidden;
    height: 0;
}
.menu .home {
    background: transparent url(http://img826.imageshack.us/img826/6568/homebi.png) 0 0 no-repeat;
}
.menu .link:hover {
    background-position: 0 -42px;
}
</style>

<div class="menu">
    <a href="#" title="Home" class="link home"><span>Home</span></a>
</div>
0 голосов
/ 17 октября 2010

Вот голые кости для переноса изображения.

КСС 

.rollover{display:block; height:42px; width:42px; background:url(http://img826.imageshack.us/img826/6568/homebi.png) top;}
.rollover:hover{background-position:bottom;}
.rollover span{display:none}

HTML 

<a href="#" class="rollover"><span>Home</span></a>

Важной частью является положение фона, которое в нормальном состоянии кнопок установлено на «верх», когда вы переключаете положение фона на «низ».

Если ваше изображение, содержащее оба состояния кнопки, имеет высоту 84px, это будет нормально работать.

...