Learn jQuery: Easy Styling Techniques

                                
$('.tile').on('mouseenter', event => {
  $('.tile-text').animate({
    color: '#FFFFFF',
    backgroundColor: '#000000'
  }, 300); // The colors will change over 300 milliseconds
});
                              

                                
// When the user hovers over the '.button' element, 
// the text color changes to red.
$('.button').on('mouseenter', event => {
  $('.text').css('color', 'red');
});
                              

                                
$('.choice').on('click', () => {
  $('.choice').toggleClass('highlighted');
});
                              

                                
$('h2').css({
  color: 'blue',
  backgroundColor: 'gray',
  fontSize: '24px'
});
                              

                                
// When the user's mouse leaves the '.button' element,
// the 'button-active' class is removed from it.
$('.button').on('mouseleave', event => {
  $(event.currentTarget).removeClass('button-active');
});
                              

                                
// The 'button-active' class is added to the '.button' elements
// when a user's mouse enters the '.button' elements.
$('.button').on('mouseenter', () => {
  $('.button').addClass('button-active'); 
});