Question

1 Approved Answer

Posted on Sep 25, 2024

Instructions on the left, assignment on the right. The last picture shows what was wrong. thx jQuery mouseenter and mouseleave Within the animals.html webpage, when

image text in transcribed Instructions on the left, assignment on the right. The last picture shows what was wrong. thx

image text in transcribed

jQuery "mouseenter" and "mouseleave" Within the "animals.html" webpage, when a user hovers their mouse over an animal image, the image is expected 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 jeuery. The jquery event handlers that look for if a mouse is hovering over an element are mouseenter() and mouseleave(). 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 // when the mouse is over the image, execute the following code: $ (this). css ("width", "600px"); // when the mouse is no longer over the image, execute the followj $ (this). css("width", "400px"); NOTE: If you find yourself struggling with the concept of event handlers, you've already encountered them in the previous module "Jovascript and jQuery": on("click", ... );. A list of jQuery's most commoniy used event handlers are provided below - you will have to utilize external documentation to understand these events fully. Show jQuery Event Handlers $ (selector).on("click", ...); // Detects when the element is c $ (selector). on ("hover", ...); // Detects when the element is r $( selector). on ("input", ...); // Detects when a user interacts $( selector). on ("keydown", ...); // Detects when a keyboard key 1 $( selector). on ("keypress", ...); // Detects when a keyboard key ( $ (selector). on ("keyup", ...); // Detects when a keyboard key i $ (selector). on ("mousedown", ...); // Detects when a user clicks $( selector). on ("mouseenter", ...); // Detects when the mouse over $( selector). on ("mouseleave", ...); // Detects when the mouse stof $( selector). on ("mouseout", ...); // Detects when the mouse stof $ (selector). on ("mouseup", ...); // Detects when a user stops c $( document). on ("ready", ...); // Detects when the DOM is fully $( selector). on ("submit", ...); // Detects when an HTML form is Tests That Failed: ! Expecting no Js errors assignment/scripts/hover.js - Line 2:1 - 'const' is available in ES6 (use 'esversion: 6') or Mozilla JS extensions (use moz). - Line 5:3 - 'const' is available in ES6 (use 'esversion: 6') or Mozilla JS extensions (use moz). - Line 6:3 - 'const' is available in ES6 (use 'esversion: 6') or Mozilla JS extensions (use moz). jQuery "mouseenter" and "mouseleave" Within the "animals.html" webpage, when a user hovers their mouse over an animal image, the image is expected 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 jeuery. The jquery event handlers that look for if a mouse is hovering over an element are mouseenter() and mouseleave(). 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 // when the mouse is over the image, execute the following code: $ (this). css ("width", "600px"); // when the mouse is no longer over the image, execute the followj $ (this). css("width", "400px"); NOTE: If you find yourself struggling with the concept of event handlers, you've already encountered them in the previous module "Jovascript and jQuery": on("click", ... );. A list of jQuery's most commoniy used event handlers are provided below - you will have to utilize external documentation to understand these events fully. Show jQuery Event Handlers $ (selector).on("click", ...); // Detects when the element is c $ (selector). on ("hover", ...); // Detects when the element is r $( selector). on ("input", ...); // Detects when a user interacts $( selector). on ("keydown", ...); // Detects when a keyboard key 1 $( selector). on ("keypress", ...); // Detects when a keyboard key ( $ (selector). on ("keyup", ...); // Detects when a keyboard key i $ (selector). on ("mousedown", ...); // Detects when a user clicks $( selector). on ("mouseenter", ...); // Detects when the mouse over $( selector). on ("mouseleave", ...); // Detects when the mouse stof $( selector). on ("mouseout", ...); // Detects when the mouse stof $ (selector). on ("mouseup", ...); // Detects when a user stops c $( document). on ("ready", ...); // Detects when the DOM is fully $( selector). on ("submit", ...); // Detects when an HTML form is Tests That Failed: ! Expecting no Js errors assignment/scripts/hover.js - Line 2:1 - 'const' is available in ES6 (use 'esversion: 6') or Mozilla JS extensions (use moz). - Line 5:3 - 'const' is available in ES6 (use 'esversion: 6') or Mozilla JS extensions (use moz). - Line 6:3 - 'const' is available in ES6 (use 'esversion: 6') or Mozilla JS extensions (use moz)