Это раздел моих навыков на моем сайте. Мне это нравится, но я хотел добавить к нему некоторые эффекты наведения, и да, я знаю, что могу сделать это в CSS, но я хотел, чтобы цвета смешивались от одного к другому и к третьему. Я также хотел, чтобы названия иконок показывались при наведении. И я хотел поработать над своими навыками JavaScript, пытаясь узнать что-то новое.

Поэтому я написал этот фрагмент кода, чтобы при наведении курсора на тег i изменить цвет на мой золотой и показать текст значка, который начинается с непрозрачности 0 и переходит в 1.

$('#front .skills__flex i').mouseenter(function() {
    $(this).css({
      'color': '#E1BB79'
    });
    $('.skill-icon').css({
      'opacity': '1'
    })
});

Но я закончил с этим:

При наведении курсора на один из значков отображаются все заголовки значков. Я хотел повлиять только на текст значка, связанный с значком, на который я навел курсор. Я пробовал много разных способов, в том числе тот, который меняет все значки на золотые и показывает весь текст значков. Поэтому я спросил одного из инструкторов HackerYou, и она дала мне намек на братьев и сестер.

Использование этого для воздействия на мой селектор при наведении на него курсора позволяет мне работать только с этим элементом, значком, но как повлиять на другие элементы в том же div (статье/разделе)? Пока они являются братьями и сестрами элемента this, вы можете использовать… да, вы, наверное, догадались, что это .siblings().

$('#front .skills__flex i').mouseenter(function() {
    $(this).css({
      'color': '#E1BB79'
    });
    $(this).siblings('p').css({
      'opacity': '1'
    })
});

Прикрепив .siblings('p') под моим селектором для элемента, на который наведен курсор, я могу сказать коду, чтобы он делал что-то конкретное с тегами абзаца, которые связаны только с этим значком, а не с другим. иконы (их родственники?).

Бонус

Еще одна забавная вещь, которую я узнал, заключалась в использовании nth-child в селекторах, чтобы элементы в полях повторителей появлялись в разное время. Я люблю энного ребенка. Вот как вы могли бы использовать его для выбора третьего div в классе с именем .projects__flex (я пытаюсь понять БЭМ):

$('#front .projects__flex div:nth-child(3)').css({
 'opacity': '0',
 'transition': 'ease opacity 1.2s'
});

Хорошо, пока!