Simplifying similar functions using a hover state with different div content

Question

I'm trying to hover over over the img then use Greensock Tweenmax on hover to control the speed and opacity of the text within the span. The opacity will change on mouseover and mouseout.

The problem is that I'm having to repeat the same exact same effect on several div's and it's becoming repetitive. Each one will be unique to the image being hovered. I don't want them all to appear at the same time when I hover over one div. I could give them all the same class then use .hover but then that would activate all of them instead of individually.

They are only to appear respective to that particular div being hovered. It works just fine, but I would like to simplify it since I will be doing this to about 20 different divs.

I need some help simplifying the code below. It works just fine, but maybe there is an easier way.

<a href="#click-for-modal" data-toggle="modal">
    <div class="test">
    <img src="img/image.png"><span>Here is some text</span>
    </div>
</a>

<a href="#click-for-another-modal" data-toggle="modal">
    <div class="testx">
    <img src="img/image.png"><span>Here is some other text</span>
    </div>
</a>


/* tweenmax hover animations */
 $('.test img').hover(
    function(){
     /*mouseover function*/
     TweenLite.to(".test span", 1.5, {opacity:1});
    }, 
    function(){
    /*mouseout function*/
     TweenLite.to(".test span", 1.5, {opacity:0});
 });

 $('.testx img').hover(
    function(){
     /*mouseover function*/
     TweenLite.to(".testx span", 1.5, {opacity:1});
    }, 
    function(){
    /*mouseout function*/
     TweenLite.to(".testx span", 1.5, {opacity:0});
 });

 $('.testxy img').hover(
    function(){
     /*mouseover function*/
     TweenLite.to(".testxy span", 1.5, {opacity:1});
    }, 
    function(){
    /*mouseout function*/
     TweenLite.to(".testxy span", 1.5, {opacity:0});
 });

 $('.testxyz img').hover(
    function(){
     /*mouseover function*/
     TweenLite.to(".testxyz span", 1.5, {opacity:1});
    }, 
    function(){
    /*mouseout function*/
     TweenLite.to(".testxyz span", 1.5, {opacity:0});
 });

Answer 1

The recommended way is to use event delegation:

$('.test, .testx, .testxy, .testxyz')
  .on('mouseover', 'img', function (e) {
    TweenLite.to($(e.delegateTarget).find('span'), 1.5, {opacity:1});
  }).on('mouseout', 'img', function (e) {
    TweenLite.to($(e.delegateTarget).find('span'), 1.5, {opacity:0});
  });

This will add the mouseover and mouseout events to all img tags within your parent elements. When the event is fired e.delegateTarget will be the parent element, so we can easily search for the span.

Answer 2

Considering you are assigning the same functionality to all of those elements, you should assign them all the same class, eg:

<div class="test my-hover">...</div>
<div class="testx my-hover">...</div>
<div class="testxy my-hover">...</div>
<!-- etc. -->

and then use $(".my-hover").

(BTW, my-hover is just an example, and is probably a bad choice for a class name. Use a class name that expresses why they get that hover effect, not that they get a hover effect.)