Hi all.
Using hover method, I am trying to show an icon that shows which repo a specific portfolio is stored (e.g CodePen, GitHub). The user will hover over the “portfolio caption”, and an image will appear on the screen.
The hover is working: When the mouse is in, I add a class changing the background colour and add an element html(’’).
On the other hand, when I leave the portfolio caption, I am not able to remove the element created previously.
It might me a bit confused but it was the only solution I found at the moment.
I want to remove the element .
HTML
JS
$(’.portfolio-caption’).hover(function() {
//Check the href of the element
var codeIcon = $(this).prev().attr(‘href’);
//Check if the project is stored in CodePen
if(codeIcon.indexOf(“codepen”)){
$(this)
.addClass('portfolio-caption-hover')
.html('<i class="fa fa-free-code-camp fa-4x" aria-hidden="true"></i>');
}
}, function() {
$(this)
.removeClass(‘portfolio-caption-hoover’)
.remove(‘i’);
});