0

I am building a website and wanted to apply an effect on hover for a div element. I know I could do it in css but wanted to write some js/jquery to practice and I could not find a solution for it. Basically, my code looks like that:

HTML:

<a href="" class="somelink">
   <img src="someimg">
   <p class="sometext">Some Text</p>
</a>

CSS:

.sometext{
   position:absolute;
   top...,right:0;        
   display:none;
   background-color:black;
   }

JS/jQuery:

$(document).ready(() => {

function portfolioItemFadeIn(e) {
   let target = $('.portfolio-item-desc')
   $(this).find(target).fadeIn();
}

$('.portfolio-item').mouseenter( (e) => portfolioItemFadeIn(e));
});

I wanted the text to cover the image and fadeIn on mouse enter but nothing is happening :( Could someone help me with that?

jhrwekuh
  • 186
  • 2
  • 15
  • 2
    Arrow functions do not change the value of `this`. Your issue is most likely stemming from this logical error. – Taplar Jan 23 '19 at 15:22
  • Ref. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions – Taplar Jan 23 '19 at 15:22
  • Makes no sesne to look them all up, just use find with the class `$(e.target).find('.portfolio-item-desc').fadeIn();` – epascarello Jan 23 '19 at 15:24
  • 1
    There is really no reason to use JavaScrpt for this. – epascarello Jan 23 '19 at 15:25
  • 1
    @epascarello as mentioned, they are practicing js – Taplar Jan 23 '19 at 15:26
  • 1
    @epascarello `"wanted to write some js/jquery to practice"` – zfrisch Jan 23 '19 at 15:26
  • 2
    `$('.portfolio-item').mouseenter( (e) => portfolioItemFadeIn(e));` should just be `$('.portfolio-item').mouseenter(portfolioItemFadeIn);`. See the [linked question's answers](https://stackoverflow.com/questions/27670401/using-jquery-this-with-es6-arrow-functions-lexical-this-binding) for part of why, see [this question's answers](http://stackoverflow.com/questions/20279484/how-to-access-the-correct-this-context-inside-a-callback) (and [here](https://stackoverflow.com/questions/3127429/how-does-the-this-keyword-work) as well) for more of wny. – T.J. Crowder Jan 23 '19 at 15:27
  • Thanks guys, it's sorted out! I just need to practice a little bit more in terms of 'this' and scoping – jhrwekuh Jan 23 '19 at 18:20

0 Answers0