This and their siblings

That’s my skills section on my website. I like it but I wanted to add some hover effects to it, and yes I know I can do this in CSS but I wanted the colours to blend from one to another to a third. I also wanted the titles for the icons to show on hover. And I wanted to work on my JavaScript skills, while trying to learn something new.

So I wrote this bit of code so when someone hovers on the i tag to change the colour to my gold, and show the icon text, which starts with an opacity of 0 and transitions to 1.

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

But I ended up with this:

When you hover on one of the icons all the icon titles appear. I wanted to only effect the icon text related to the icon I hovered on. I tried many different ways, including one that changes all the icons to gold and showed all the icon text. So I asked one of the HackerYou instructors and she gave me the hint of siblings.

Using ‘this’ to effect my selector when I hover on it, allows me to work with just that item, the icon, but how to does one effect the other items in the same div (article/section)? As long as they are siblings of the ‘this’ item, you can use… yep you probably guessed it .siblings().

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

By attaching the .siblings(‘p’) below my selector for the item being hovered on, I can tell the code to do something specific to the paragraph tags that are only related to that icon and not other icons (their cousins?).

Bonus

Another fun thing I learned was using nth-child in selectors to have items in repeater fields fade in at different times. I love nth-child. Here is how you would use it to select the 3rd div in a class called .projects__flex (I’m trying to understand BEM):

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

Okay bye! You can find me on twitter @erkdonovan