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

Question

[Mummers]

Короче, при ховере появляется цифра, можно это сделать как-то быстрее чем дабовлять всем картинкам цифры?
Или все же придется все делать ручками)
Не знаю, может JavaScript может в этом помочь?
И если да, то как это гуглить? Есть название этого?)

Answer 1

[Eugene Chefranov]

Можно на CSS

Comments

[Mummers]

Темные технологии.
Спасибо)

Answer 2

[Фёдор Филипьев]

Если картинок на каждой странице (или у вас одна страница) одинаковое количество и не надо будет ничего менять, то
Всем картинкам пишем
<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

Answer 3

[ThunderCat]

если все цифры по порядку -
1) задайте класс или дата аттрибут для всех картинок на которые надо задать цифры
2) по загрузке документа выбираете все картинки с этим свойством, в чистом жс получите сет, в жквери сразу итерэйбл объект. Для сета используете Array.from(ваш_сет), получите массив, и уже на массиве можете использовать цикл, чтобы задать каждой картинке номер.
3) В цикле вешаете событие onMouseOver на ваши картинки, к событию назначаете функцию которая будет показывать текущий номер картинки.

Comments

[Andrey]

Хуже решения и не придумать.

Answer 4

[drawnofmymind]

Цикл for