$(document).ready(function(){
 
//RELEASE 0: 
  //Link this script and the jQuery library to the jquery_example.html file and analyze what this code does. 
 
$('body').css({'background-color': '#CEECF5'})


//RELEASE 1:
  //Add code here to select elements of the DOM 
 
var bodyElement = $('body');
var bodyElement = $('h1');
var mascot = $('.mascot');
//RELEASE 2: 
  // Add code here to modify the css and html of DOM elements
 
$( "h1" ).on( "mouseover", function() {
  $( this ).css( "color", "white" );
}); 
$( "h1" ).on( "mouseover", function() {
  $( this ).css( "border", "thin solid black" );
}); 

$( "h2" ).on( "mouseover", function() {
  $( this ).css( "visibility", "hidden" );
}); 

$( "h1.dfly" ).on( "mouseover", function() {
  $( this ).html("DRAGONFLIES");
}); 


//RELEASE 3: Event Listener
  // Add the code for the event listener here 
 
 $('img').on('mouseover', function(e){
     e.preventDefault()
    $(this).attr('src', 'img/dragonflies.jpg')
  })

  $('img').on('mouseleave', function(e){
     e.preventDefault()
    $(this).attr('src', 'img')
  })

//RELEASE 4 : Experiment on your own

$("img").mouseover(function(){
   $(this).animate({
                      height:'300px',
                      width:'600px',
                      left : '-11px'
                    })
                            });

$("img").mouseout(function(){
   $(this).animate({
                      height:'20px',
                      width:'20px',
                      left : '0px'
                    })
                            });
 
 


 
 
})  // end of the document.ready function: do not remove or write DOM manipulation below this.