Задать вопрос
@Mummers

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

Короче, при ховере появляется цифра, можно это сделать как-то быстрее чем дабовлять всем картинкам цифры?5ed5ecfbb0c91694233980.png
Или все же придется все делать ручками)
Не знаю, может JavaScript может в этом помочь?
И если да, то как это гуглить? Есть название этого?)
  • Вопрос задан
  • 115 просмотров
Подписаться 1 Средний Комментировать
Решение пользователя Фёдор Филипьев К ответам на вопрос (4)
fedor_filipev
@fedor_filipev
Программист баянист
Если картинок на каждой странице (или у вас одна страница) одинаковое количество и не надо будет ничего менять, то
Всем картинкам пишем
<img data-number="1">
Цифру меняем прямо в html
а в css пишем
img {
  postition: relative;
}
img:hover::after {
  position: absolute;
  /* top right подстроите сами под правый верхний угол*/
  content: attr(data-number);
}

Если лень выставлять все номера в вёрстке, то используем счётчик на чистом CSS 3
/*Блок, в котором все ваши картинки (если такого нет пишите body)*/
.img-container {
  counter-reset: imageNum; /* вместо imageNum можно любое название на латинице*/
}
/*Все ваши картинки*/
img {
  counter-increment: imageNum; /*Имя счётчика должно совпадать*/
}
/* Выводим так же*/
img:hover::after {
  position: absolute;
  /* top right подстроите сами под правый верхний угол*/
  content: counter(imageNum); /*Имя счётчика должно совпадать*/
}

Готово, если не сработает:
htmlbook.ru/blog/nachinaem-rabotat-s-css-schyotchikami
Ответ написан
Комментировать