Вращать иконок при наведении в меню

[nruslan2]

Наверно было интересно при наведении на пункты меню - чтобы иконки вращались (либо полностью либо частично)

Пробовал вот такое подсунуть, но не видит он почему то элементы в блоке <i> (((
$('.fa-reorder').hover(function(){
$('.fa-reorder').addClass('fa-spin');
})

[Develop-Soft]

но не видит он почему то элементы в блоке

Кто не видит..? Фамилия? Прописка?))

Так что-ли надо было?:

Код: Выделить всё

$(".page-sidebar-menu > li").hover(function(){
 $(this).find("i[class*=fa]").addClass("fa-spin");
}).mouseleave(function(){
 $(this).find("i[class*=fa]").removeClass("fa-spin");
});

[nruslan2]

ВЫ ГЕНИЙ!!!!

ЗЫ никак не могу понять логику как все таки достукиваться до элементов(на будущее)!! ускользает она от меня почему - видать JS jQUERY не мое

ЗЗЫ и все же спрошу: а как вы такие видяшки делаете?)

[Develop-Soft]

как все таки достукиваться до элементов(на будущее)

Я гуглю...
Ну и в голове примерный список: "с чего начать..", "что происходит на странице..", "при каких событиях..", "через что лучше отлов..", "может не по 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"); // перестаем крутить
  });

как вы такие видяшки делаете?

LICEcap. Хостинг - imgur (рекомендую).

[nruslan2]

гуглить это логично) сам так делаю.
но вот весь гугл говорил что можно по классу искать в div он искал в li он искал, а в i не искал(

вопрос, а почему class *= , что за оператор сравнения какой то *=

за прогу спасибо)

[Develop-Soft]

Кстати, еще такой прикол в системе - не все не везде и не всегда доступно. Такие компоненты уже надо ловить всякими "ожидающими" функциями (евент-листенерами, объект-мутантами, таймерами (жесть, но иногда можно)...)

[Develop-Soft]

вопрос, а почему class *= , что за оператор сравнения какой то *=

Почерпнул из документации jQuery (хотя распространяется не только на эту библиотеку а пришло из js).
Звездочка означает "частичное совпадение" для случаев, когда может быть несколько классов (<i class='fa fu fe-..>)

но вот весь гугл говорил что можно по классу искать в div он искал в li он искал, а в i не искал(

"не стой стороны" заходили видимо... Хотя ваш код - тоже рабочий (проверил в консольке). Только он начинает вращать все найденные иконки при наведении на саму иконку. А надо было вешать наведение на пункт меню.

[nruslan2]

иконка... блин точно я и не доводил же до нее мышку - Кстати саму иконку можно вращать и без JS,а сразу в CSS там тоже есть hover)

[Develop-Soft]

Кстати саму иконку можно вращать и без JS,а сразу в CSS там тоже есть hover)

Это понятно, но не то ведь, что требовалось...

[believe]

Подскажите, а куда это прикручивается что бы использовать?