Learning jQuery 3 - Fifth Edition

Displaying data on hover

The next feature we want to provide on this page is to display the details relating to each photo when the user's mouse is in that area of the page. For our first pass at displaying this information, we can use the .hover() method:

$(() => {  $('div.photo')    .hover((e) => {      $(e.currentTarget)        .find('.details')        .fadeTo('fast', 0.7);  }, (e) => {      $(e.currentTarget)        .find('.details')        .fadeOut('fast');  });}); 

Listing 10.3

When the cursor enters a photo's boundary, the associated information fades in to 70 percent opacity, and when it leaves, the information fades back out:

There are, of course, multiple ways to perform ...