Использование одной позиции фонового изображения для переключения изображений

Question

Использование одной позиции фонового изображения для переключения изображений

0

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

li       { width: 400px; height: 80px;
           background-repeat: no-repeat; background-position: 10px 10px;
           background-image: url('myimg.png'); }
li:hover { background-image: url('myimg-hover.png'); }

К сожалению, это вызывает немного мерцания при первом просмотре страницы и наведении курсора на элемент.

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

Изображения, объединенные в один, имеют ширину 25 пикселей и высоту 50 пикселей, а изображение отображается только 25 пикселей x 25 пикселей.

Я попробовал это:

li       { background: url('mynewimg.png') 0 0; }
li:hover { background: url('mynewimg.png') 0 -25px; }

Но это просто показывает весь образ, так как мой элемент списка настолько велик и не позиционирует его правильно.

Кто-нибудь знает, как я могу это сделать?

Steven 03 окт. 2013, в 04:35

Источник

0

Как насчет jsFiddle, чтобы мы могли видеть разметку и скрипты?
DevlshOne 03 окт. 2013, в 02:09

Теги:

html

css

html5

css3

3 ответа

1

Ваш CSS должен быть:

li {
    width: 400px; height: 80px;
    background-repeat: no-repeat;
    background-size: 50px 50px; 
    background-position: 10px 10px;
    background-image: url('mynewim.png'); 
    background-origin: 0px 0px;
}
li:hover { 
   background-origin: 50px 0px; 
}

Вы должны установить разницу по размеру, а затем сыграть с источником

vals 03 окт. 2013, в 14:37

0

Без jsFiddle я не могу представить этот пример, но, думаю, вы говорите об спрайтах с изображениями. Ознакомьтесь с http://css-tricks.com/css-sprites/ для получения дополнительной информации о них.

user2578173 03 окт. 2013, в 01:16

0

Он использовал идею спрайта как второй вариант, ему нужно сделать jsfiddle, чтобы мы могли дать ему лучшее решение.
Arpit Srivastava 03 окт. 2013, в 05:21

Ещё вопросы

Как насчет jsFiddle, чтобы мы могли видеть разметку и скрипты?
Он использовал идею спрайта как второй вариант, ему нужно сделать jsfiddle, чтобы мы могли дать ему лучшее решение.

Arpit Srivastava · Accepted Answer · 2013-10-03T04-20-00.000Z

Что я могу сделать:

<li class="icon"><i></i></li>

.icon {
  width:25px;
  height:50px;
  display:table-cell;
 vertical-alignment:middle;
}
.icon>i
{
  background:url();
  background-position:<value>px,<value>px
}
.icon:hover>i{
background-position: <value>px,<value>px
}

Надейтесь, что это решение решит вашу проблему.