Michael Michael - 2 months ago 6
jQuery Question

JQuery change cass to multiple div

How can I add more classes to trigger when the hover only the .button?
ex: hover on .button a will add class to another objects.

jQuery('.button a').hover(

function () {
jQuery(this).parent().parent().parent().addClass('over');
},
function () {
jQuery(this).parent().parent().parent().removeClass('over');
}
);

Answer

I would use jquery data and do something like this:

    jQuery('.button a').hover(

    function () {
        jQuery(this).parent().parent().parent().addClass('over');
        var target1 = jQuery('.elem a').addClass('small');
        var div1 = jQuery('.first-div').addClass('firstdiv');
        var div2 = jQuery('.second-div').addClass('seconddiv');
        
        $(this).data('first', div1);
        $(this).data('second',div2); 
        $(this).data('target',target1); 

    }, 
    function () {
        jQuery(this).parent().parent().parent().removeClass('over');
        $(this).data('target').removeClass('small');
        $(this).data('first').removeClass('firstdiv');
        $(this).data('second').removeClass('seconddiv');
    }
    );
    .over {
      font-weight: Bold;
      font-size: 40px;
    }

    .small {
      font-style: italic;
      font-size: 12px;
    }

    .firstdiv{
      color: red;
    }
    
    .seconddiv {
      color: green;
    }
  .first-div, .second-div {
    font-size: 18px;
    font-weight: normal;
  } 
    
  .changefont {
    font-size: 30px;
  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="button">

    <a href="#"> BIG</a>
    </div>
    <div class="elem">

    <a href="#">ME TOO</a>
    </div>
   <div class="first-div">
    First Div
    </div>
    <div class="second-div">
    Second Div
    </div>

EDIT: I've added extra divs to demo the usage in case someone else ends up here.