@Mummers

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

Короче, при ховере появляется цифра, можно это сделать как-то быстрее чем дабовлять всем картинкам цифры?5ed5ecfbb0c91694233980.png
Или все же придется все делать ручками)
Не знаю, может JavaScript может в этом помочь?
И если да, то как это гуглить? Есть название этого?)
  • Вопрос задан
  • 98 просмотров
Решения вопроса 3
Chefranov
@Chefranov
Новичок
Можно на CSS
Ответ написан
@fedor_filipev
Начинающий верстальщик и программист на Python
Если картинок на каждой странице (или у вас одна страница) одинаковое количество и не надо будет ничего менять, то
Всем картинкам пишем
<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
Ответ написан
ThunderCat
@ThunderCat
{PHP, MySql, HTML, JS, CSS} developer
если все цифры по порядку -
1) задайте класс или дата аттрибут для всех картинок на которые надо задать цифры
2) по загрузке документа выбираете все картинки с этим свойством, в чистом жс получите сет, в жквери сразу итерэйбл объект. Для сета используете Array.from(ваш_сет), получите массив, и уже на массиве можете использовать цикл, чтобы задать каждой картинке номер.
3) В цикле вешаете событие onMouseOver на ваши картинки, к событию назначаете функцию которая будет показывать текущий номер картинки.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы