read the instructions. this is all I have. if you can't answer it, no worries. pass it on to the next person
(4) jQuery "mouseenter" and "mouseleave" Within the "animals.html" webpage, when a user hovers their mouse over an animal image, the image is expocted to enlarge in size; when the user moves the mouse away from the image, the animal image returns to its original size. However, this behavior has not been implemented yet. The purpose of this activity is to add this behavior via JavaScript and jquery. The jQuery event handlers that look for if a mouse is hovering over an element are mouseenter() and mouse leave(]. Instructions The only file you will need to alter for this activity is "hover.js" - all the necessary HTML and CSS has been added to "animals.html" and "site.css" respectively. Within the JavaScript file "hover.js", you must write the event handlers for both mouseenter() and mouseleave(). Within your mouseenter() and mouse leave () event handlers, you may put the following code inside of mouseenter and mouseleave respectively: Show JavaScript I/ when the nouse is over the inage, execute the following code: Il when the nouse is mo longer over the inage, execute the following code: $( th 15). css( (width ,"4 "aspx"); NOTE: If you find yourseif struggingg with the concept of event handiers, you've already encountered them in the previous module "Jovascript and jQuery": an ("click", ... ); . A fist of jQuery's most commonly used ovent hondiers are provided below - you will have to utilize externol documentation to understand these events fully. Show jQuery Event Handlers \$iselectorl.on("click", ...); I/ petects inten the elenent is clicked $ (selector), on ("hover",...); // petects inten the elenent is hovered over by the mouse or whan $ (selector) an(-1ngut",...); if Detects when a user interacts with an ingut elerent (1.e. typil \$(selector) an("keydoun", ...); // petects when a keytoard key is pressed dann \$iselectorj an(-keypress",...); // Detects when a keyboard key inat including non-printing keys I \$iselectorl.on ("keyup",...); // Detects nhten a keytoard key is released \$iselectorj an("nousedomn", ...); I/ netects when a user clicks either the left or right mouse bur \$iselectori. on ("iouseenter",....); // betects when the mouse uverlaps or hovers above an eletent. \$(selector) an("nouseleave",...); // Detects when the nouse staps averlapping or havering above al \$1selectors, an("nouseout",...); II Detects when the nouse staps overtapping ar hovering above al: $ Sselectorl. on ("icuseup",...); // betects when a user stops clicking either the left or right $ (docurenti, an(-ready",..,); // Detects when the oon is fully loaded \$(selector). on ( "subnit",...); // Detects nhen an HTL forr is subnitted Tests That Failed: ! Expecting hovering over images to enlarge the images Manipulating the following elements did not return the expected results: - Animal images
