Страница 1 из 2
Вращать иконок при наведении в меню
Добавлено: 01 окт 2021, 14:15
nruslan2
Наверно было интересно при наведении на пункты меню - чтобы иконки вращались (либо полностью либо частично)
Пробовал вот такое подсунуть, но не видит он почему то элементы в блоке <i> (((
$('.fa-reorder').hover(function(){
$('.fa-reorder').addClass('fa-spin');
})
Re: Вращать иконок при наведении в меню
Добавлено: 01 окт 2021, 20:02
Develop-Soft
nruslan2 писал(а): 01 окт 2021, 14:15
но не видит он почему то элементы в блоке
Кто не видит..? Фамилия? Прописка?))
Так что-ли надо было?:
Код: Выделить всё
$(".page-sidebar-menu > li").hover(function(){
$(this).find("i[class*=fa]").addClass("fa-spin");
}).mouseleave(function(){
$(this).find("i[class*=fa]").removeClass("fa-spin");
});
Re: Вращать иконок при наведении в меню
Добавлено: 01 окт 2021, 20:56
nruslan2
ВЫ ГЕНИЙ!!!!
ЗЫ никак не могу понять логику как все таки достукиваться до элементов(на будущее)!! ускользает она от меня почему - видать JS jQUERY не мое
ЗЗЫ и все же спрошу: а как вы такие видяшки делаете?)
Re: Вращать иконок при наведении в меню
Добавлено: 01 окт 2021, 21:24
Develop-Soft
nruslan2 писал(а): 01 окт 2021, 20:56
как все таки достукиваться до элементов(на будущее)
Я гуглю...
Ну и в голове примерный список: "с чего начать..", "что происходит на странице..", "при каких событиях..", "через что лучше отлов..", "может не по id или классу или другому атрибуту..", ...
и т.д. и д.т.п.". По мере знаний стараюсь учесть максимум возможных конфликтов, чтобы код не был откровенным g-кодом.
Целиком это объяснить невозможно, просто логическое мышление, ежедневное наполнение брички чем-то новым.
Конкретно в этом скрипте - могу дать примерное пояснение
(ну, примерно как второклассник)):
$(".page-sidebar-menu > li") // ищем все дочерние li (пункты меню то бишь) внутри сайдбара.
.hover(function(){ // ну, тут понятно - "при событии наведения крысой"
$(this). // внутри функции мы находимся в контексте найденного объекта, поэтому можем обращаться this (ну, "это")))...
.find("i[class*=fa]") // ищем i-ку внутри page-sidebar-menu. Для пущей "железности" в селекторе дополнительно указываем класс fa (вдруг там еще кто-то есть с тегом i)
.addClass("fa-spin"); // ну с этим тоже понятно...
}).mouseleave(function(){ // событие "сваливания крысы с пункта меню". Так как мы находимся все в том же контексте найденного пункта меню - мы просто доращиваем "колбасу" новым событием, не вызывая еще раз $(".page-sidebar-menu > li")
$(this).find("i[class*=fa]").removeClass("fa-spin"); // перестаем крутить
});
nruslan2 писал(а): 01 окт 2021, 20:56
как вы такие видяшки делаете?
LICEcap. Хостинг - imgur (рекомендую).
Re: Вращать иконок при наведении в меню
Добавлено: 01 окт 2021, 21:37
nruslan2
гуглить это логично) сам так делаю.
но вот весь гугл говорил что можно по классу искать в div он искал в li он искал, а в i не искал(
вопрос, а почему class *= , что за оператор сравнения какой то *=
за прогу спасибо)
Re: Вращать иконок при наведении в меню
Добавлено: 01 окт 2021, 21:41
Develop-Soft
Кстати, еще такой прикол в системе - не все не везде и не всегда доступно. Такие компоненты уже надо ловить всякими "ожидающими" функциями (евент-листенерами, объект-мутантами, таймерами (жесть, но иногда можно)...)
Re: Вращать иконок при наведении в меню
Добавлено: 01 окт 2021, 21:46
Develop-Soft
nruslan2 писал(а): 01 окт 2021, 21:37
вопрос, а почему class *= , что за оператор сравнения какой то *=
Почерпнул из документации jQuery (хотя распространяется не только на эту библиотеку а пришло из js).
Звездочка означает "частичное совпадение" для случаев, когда может быть несколько классов (<i class='fa fu fe-..>)
nruslan2 писал(а): 01 окт 2021, 21:37
но вот весь гугл говорил что можно по классу искать в div он искал в li он искал, а в i не искал(
"не стой стороны" заходили видимо... Хотя ваш код - тоже рабочий (проверил в консольке). Только он начинает вращать все найденные иконки при наведении на саму иконку. А надо было вешать наведение на пункт меню.
Re: Вращать иконок при наведении в меню
Добавлено: 02 окт 2021, 00:29
nruslan2
иконка... блин точно я и не доводил же до нее мышку - Кстати саму иконку можно вращать и без JS,а сразу в CSS там тоже есть hover)
Re: Вращать иконок при наведении в меню
Добавлено: 02 окт 2021, 08:26
Develop-Soft
nruslan2 писал(а): 02 окт 2021, 00:29
Кстати саму иконку можно вращать и без JS,а сразу в CSS там тоже есть hover)
Это понятно, но не то ведь, что требовалось...
Re: Вращать иконок при наведении в меню
Добавлено: 06 окт 2021, 11:33
believe
Подскажите, а куда это прикручивается что бы использовать?