Зарезервировать место для псевдоэлемента перед наведением мыши

Question

Зарезервировать место для псевдоэлемента перед наведением мыши

0

Я хочу добавить изображение к каждому li, но я бы хотел отображать его только на мыши. Однако я хочу избежать эффекта "перемещения", что является следствием добавления нового элемента (изображения) в DOM. Я попытался исправить его с visibility:hidden, поскольку это занимает пространство, но без везения.

Вот простой пример, как вы можете видеть, при падении этих li они двигаются справа.

Каков самый простой способ достичь этого?

http://jsfiddle.net/UQAjh/

Ned 16 фев. 2014, в 18:47

Источник

Теги:

html

css

1 ответ

Ещё вопросы

marionebl · Accepted Answer · 2014-02-16T14-40-00.000Z

Вам нужно либо позиционировать :before псевдоэлемента абсолютно, чтобы предотвратить его ввод в поток макета, если он показан, или создать псевдоэлемент независимо от состояния :hover при opacity 0 и установить opacity 1 при зависании.

Сохранение :before выходом из макета

ul > li:hover:before {
   /* all the other styles */
   position: absolute;
   left: 25px;
}

Скрипт: http://jsfiddle.net/marionebl/UQAjh/1/

Создание :before независимо от :hover состояние :hover

ul > li:before {
   /* all the other styles */
   display: inline-block;
   float: left;
   opacity: 0;
}

ul > li:hover:before {
   opacity: 1;
}

Скрипт: http://jsfiddle.net/marionebl/Nda6Z/1/

Просто из интереса: какой вариант вы выбрали и почему?
Я собираюсь использовать первый вариант, меньше кода :) При втором подходе я пробовал подобное с видимостью: скрыто, но это не сработало. Непрозрачность сделает свое дело, отлично!