{"id":7224,"date":"2015-09-29T12:15:09","date_gmt":"2015-09-29T09:15:09","guid":{"rendered":"http:\/\/www.webcodegeeks.com\/?p=7224"},"modified":"2017-12-21T16:12:19","modified_gmt":"2017-12-21T14:12:19","slug":"jquery-mouseover-example-2","status":"publish","type":"post","link":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-mouseover-example-2\/","title":{"rendered":"jQuery Mouseover Example"},"content":{"rendered":"

The aim of this article is to explain the usage of .mouseover()<\/code> method of jQuery. The mouseover event occurs when the mouse pointer is over the selected element, and that makes it very useful when considering changing content on hover. It will basically allow you to have whatever kind of behaviour you want as soon as the cursor reaches the element given this method. <\/p>\n

This event is often used together with the mouseout<\/code> or mouseleave<\/code> event. This is because, obviously, when you leave the element you may want to reset it to its initial view. Later in this article, we’ll see what is the difference between .hover()<\/code> and .mouseover()<\/code> method, as they are often confused with each-other.
\n[ulp id=’qGGDqWnle19VavkM’]<\/p>\n

1. Basic Setup<\/h2>\n

The following two section contain the most basic setup you should have to keep going futher.<\/p>\n

1.1 HTML Document<\/h3>\n

To begin, create a new HTML document and add the following basic syntax:<\/p>\n

\r\n<!DOCTYPE html>\r\n<html>\r\n<head>\r\n\t<title>jQuery Mouseover Example<\/title>\r\n<\/head>\r\n<body>\r\n\r\n<!-- STYLE SECTION  -->\r\n\r\n<!-- HTML SECTION  -->\r\n\r\n\r\n<!-- JAVASCRIPT SECTION  -->\r\n<script src=\"jquery-1.11.3.min.js\"><\/script>\r\n\r\n<script type=\"text\/javascript\">\r\n\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
1.2 Basic Application of .mouseover()<\/strong><\/h3>\n
To apply the .mouseover() method, add some element in HTML first:<\/p>\n
\r\n<!-- HTML SECTION  -->\r\n<div>I am just a line<\/div>\r\n<\/pre>\n
We’d like, for example, to add a class (which will change styling) when the mouse is over the only div<\/code> we have. So let’s set up a class in CSS and set the text color to white, the background to blue and add a padding.<\/p>\n
\r\n<!-- STYLE SECTION  -->\r\n<style type=\"text\/css\">\r\n    .blue-bg {\r\n        color: white;\r\n        background-color: #2980b9;\r\n        padding:1em;\r\n        width: 8em;\r\n    }\r\n<\/style>\r\n<\/pre>\n
To trigger .addClass()<\/code> method on hover, select the div<\/code> and add the .mouseover()<\/code> method in it, specifying that you want to add a class to this div. It would look something like this:<\/p>\n
\r\n<!-- JAVASCRIPT SECTION  -->\r\n<script type=\"text\/javascript\">\r\n$('div').mouseover(function(){\r\n    $(this).addClass('blue-bg');\r\n});\r\n<\/script>\r\n<\/pre>\n
The result would be a slightly different style on the div<\/code> when the cursor gets over it.
\n
\"A<\/a>
A Basic Example<\/figcaption><\/figure><\/p>\n
2. A Comprehensive Example<\/h2>\n
Now let’s begin creating a real-case content which will be added styles, content and animation on mouseover. This is just a real example to give you an idea how important and useful the .mouseover()<\/code> method is. Here, I am using Bootstrap<\/strong> framework and animate.css<\/strong> to spped up coding, but these have nothing to do with our actual jQuery code, we’re still using .mouseover()<\/code> later. This code will be provided together with all supporting files, so there is no need to copy and try it now because you’ll need extra links like bootstrap and animate.css libraries.<\/p>\n
First, I created some elements, most of which were hidden at first using \"display:none\"<\/code>:
\n
\"HTML<\/a>
HTML Section of a Real Example<\/figcaption><\/figure><\/p>\n
Then, added some styling to have a better designed content.
\n
\"CSS<\/a>
CSS Section of a Real Example<\/figcaption><\/figure><\/p>\n
Finally, just be adding and removing classes using .mouseover()<\/code> and .mouseleave()<\/code> (the opposite of mouseover) I came to this great animated photo hover.<\/p>\n
\r\n<!-- JAVASCRIPT SECTION  -->\r\n<script type=\"text\/javascript\">\r\n    $('.box-wrapper').mouseover(function(){\r\n      $(this).find('.content').addClass('animated zoomIn').show();\r\n    }).mouseleave(function(){\r\n      $(this).find('.content').fadeOut();\r\n    });\r\n<\/script>\r\n<\/pre>\n
http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/09\/Untitled.mp4<\/a><\/video><\/div>\n
3. Alternative Syntaxes<\/h2>\n
3.1 Using .on(‘mouseover’, handler)<\/strong><\/h3>\n
You can achieve the exact same results using .on( \"mouseover\", handler )<\/code> instead of .mouseover( handler )<\/code>. For the first example, we’d just have:<\/p>\n
\r\n<!-- JAVASCRIPT SECTION  -->\r\n<script type=\"text\/javascript\">\r\n$('div').on('mouseover', function(){\r\n    $(this).addClass('blue-bg');\r\n});\r\n<\/script>\r\n<\/pre>\n
3.2 Using .hover()<\/strong><\/h3>\n
We use .hover()<\/code> to bind one or two handlers to the matched elements, to be executed when the mouse pointer enters and leaves the elements. For our simple example, we’d have:<\/p>\n
\r\n<!-- JAVASCRIPT SECTION  -->\r\n<script type=\"text\/javascript\">\r\n$('div').hover(\r\n    function(){\r\n    $(this).addClass('blue-bg');\r\n},\r\n    function(){\r\n    $(this).removeClass('blue-bg');\r\n});\r\n<\/script>\r\n<\/pre>\n
http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/09\/mouseover-5.mp4<\/a><\/video><\/div>\n
What’s the difference between .hover()<\/strong> and .mouseover()<\/strong>?<\/h4>\n
The hover()<\/strong> function is more high level – it’s built to call functions to handle both a mouseenter event and a mouseleave event. It’s very convenient for a UI element that has a hover and normal state (e.g. a button.)<\/p>\n
The mouseover()<\/strong> function specifically binds to the mouseover event. It’s best for situations where you only care when the mouse has crossed the border into an element and you don’t really care what happens if it leaves. It’s also the function to call when you want to trigger the event on some element. <\/p>\n
3.3 Using .mouseenter()<\/strong><\/h3>\n
In short, you’ll notice that a mouse over event occurs on an element when you are over it – coming from either its child OR parent element, but a mouse enter event only occurs when the mouse moves from the parent element to the element. However, in most cases, you won’t notice a difference. The updated code using .mouseenter()<\/code> and .mouseout<\/code> (the equivalent for mouseleave) would be:<\/p>\n
\r\n<!-- JAVASCRIPT SECTION  -->\r\n<script type=\"text\/javascript\">\r\n$('div').mouseenter(function(){\r\n    $(this).addClass('blue-bg');\r\n}).mouseout ( function(){\r\n    $(this).removeClass('blue-bg');\r\n});cript>\r\n<\/pre>\n
The result would look just the same as above.<\/p>\n
4. Conclusion<\/h2>\n
To conclude, it is important to state that .mouseover() is jQuery’s way of stating :hover (from CSS), but it comes with a lot more advantages here. You can manipulate stuff a lot easier, adding or removing classes, animating content or even adding extra HTML elements, all of which happen at the moment when the cursor gets over a specific content you choose.<\/p>\n
5. Download<\/h2>\n
Download<\/strong>
\nYou can download the full source code of this example here: jQuery Mouseover<\/strong><\/a>\n<\/div>\n","protected":false},"excerpt":{"rendered":"
The aim of this article is to explain the usage of .mouseover() method of jQuery. The mouseover event occurs when the mouse pointer is over the selected element, and that makes it very useful when considering changing content on hover. It will basically allow you to have whatever kind of behaviour you want as soon …<\/p>\n","protected":false},"author":75,"featured_media":919,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[23],"tags":[249],"class_list":["post-7224","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-jquery","tag-mouseover"],"yoast_head":"\njQuery Mouseover Example - Web Code Geeks - 2026<\/title>\n<meta name=\"description\" content=\"The aim of this article is to explain the usage of .mouseover() method of jQuery. The mouseover event occurs when the mouse pointer is over the selected\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-mouseover-example-2\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"jQuery Mouseover Example - Web Code Geeks - 2026\" \/>\n<meta property=\"og:description\" content=\"The aim of this article is to explain the usage of .mouseover() method of jQuery. The mouseover event occurs when the mouse pointer is over the selected\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-mouseover-example-2\/\" \/>\n<meta property=\"og:site_name\" content=\"Web Code Geeks\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/webcodegeeks\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/fabiocimo\" \/>\n<meta property=\"article:published_time\" content=\"2015-09-29T09:15:09+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2017-12-21T14:12:19+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/jquery-logo.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"150\" \/>\n\t<meta property=\"og:image:height\" content=\"150\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Fabio Cimo\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@fabiocimo\" \/>\n<meta name=\"twitter:site\" content=\"@webcodegeeks\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Fabio Cimo\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-mouseover-example-2\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-mouseover-example-2\/\"},\"author\":{\"name\":\"Fabio Cimo\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/1dfb88b4a8d08c37a6080311fd330a22\"},\"headline\":\"jQuery Mouseover Example\",\"datePublished\":\"2015-09-29T09:15:09+00:00\",\"dateModified\":\"2017-12-21T14:12:19+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-mouseover-example-2\/\"},\"wordCount\":788,\"commentCount\":1,\"publisher\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-mouseover-example-2\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/jquery-logo.jpg\",\"keywords\":[\"mouseover\"],\"articleSection\":[\"jQuery\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-mouseover-example-2\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-mouseover-example-2\/\",\"url\":\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-mouseover-example-2\/\",\"name\":\"jQuery Mouseover Example - Web Code Geeks - 2026\",\"isPartOf\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-mouseover-example-2\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-mouseover-example-2\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/jquery-logo.jpg\",\"datePublished\":\"2015-09-29T09:15:09+00:00\",\"dateModified\":\"2017-12-21T14:12:19+00:00\",\"description\":\"The aim of this article is to explain the usage of .mouseover() method of jQuery. The mouseover event occurs when the mouse pointer is over the selected\",\"breadcrumb\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-mouseover-example-2\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-mouseover-example-2\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-mouseover-example-2\/#primaryimage\",\"url\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/jquery-logo.jpg\",\"contentUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/jquery-logo.jpg\",\"width\":150,\"height\":150},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-mouseover-example-2\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.webcodegeeks.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"JavaScript\",\"item\":\"https:\/\/www.webcodegeeks.com\/category\/javascript\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"jQuery\",\"item\":\"https:\/\/www.webcodegeeks.com\/category\/javascript\/jquery\/\"},{\"@type\":\"ListItem\",\"position\":4,\"name\":\"jQuery Mouseover Example\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#website\",\"url\":\"https:\/\/www.webcodegeeks.com\/\",\"name\":\"Web Code Geeks\",\"description\":\"Web Developers Resource Center\",\"publisher\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.webcodegeeks.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\",\"name\":\"Exelixis Media P.C.\",\"url\":\"https:\/\/www.webcodegeeks.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png\",\"contentUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png\",\"width\":864,\"height\":246,\"caption\":\"Exelixis Media P.C.\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/webcodegeeks\",\"https:\/\/x.com\/webcodegeeks\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/1dfb88b4a8d08c37a6080311fd330a22\",\"name\":\"Fabio Cimo\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/b3df055f2e1b62e238889fafbb16121c68aab1adcd11af670e185cafae201b3b?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/b3df055f2e1b62e238889fafbb16121c68aab1adcd11af670e185cafae201b3b?s=96&d=mm&r=g\",\"caption\":\"Fabio Cimo\"},\"description\":\"Fabio is a passionate student in web tehnologies including front-end (HTML\/CSS) and web design. He likes exploring as much as possible about the world wide web and how it can be more productive for us all. Currently he studies Computer Engineering, at the same time he works as a freelancer on both web programming and graphic design.\",\"sameAs\":[\"https:\/\/www.facebook.com\/fabiocimo\",\"https:\/\/al.linkedin.com\/in\/fabiocimo\",\"https:\/\/x.com\/fabiocimo\",\"https:\/\/www.youtube.com\/fabiocimo1\"],\"url\":\"https:\/\/www.webcodegeeks.com\/author\/fabio-cimo\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"jQuery Mouseover Example - Web Code Geeks - 2026","description":"The aim of this article is to explain the usage of .mouseover() method of jQuery. The mouseover event occurs when the mouse pointer is over the selected","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-mouseover-example-2\/","og_locale":"en_US","og_type":"article","og_title":"jQuery Mouseover Example - Web Code Geeks - 2026","og_description":"The aim of this article is to explain the usage of .mouseover() method of jQuery. The mouseover event occurs when the mouse pointer is over the selected","og_url":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-mouseover-example-2\/","og_site_name":"Web Code Geeks","article_publisher":"https:\/\/www.facebook.com\/webcodegeeks","article_author":"https:\/\/www.facebook.com\/fabiocimo","article_published_time":"2015-09-29T09:15:09+00:00","article_modified_time":"2017-12-21T14:12:19+00:00","og_image":[{"width":150,"height":150,"url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/jquery-logo.jpg","type":"image\/jpeg"}],"author":"Fabio Cimo","twitter_card":"summary_large_image","twitter_creator":"@fabiocimo","twitter_site":"@webcodegeeks","twitter_misc":{"Written by":"Fabio Cimo","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-mouseover-example-2\/#article","isPartOf":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-mouseover-example-2\/"},"author":{"name":"Fabio Cimo","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/1dfb88b4a8d08c37a6080311fd330a22"},"headline":"jQuery Mouseover Example","datePublished":"2015-09-29T09:15:09+00:00","dateModified":"2017-12-21T14:12:19+00:00","mainEntityOfPage":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-mouseover-example-2\/"},"wordCount":788,"commentCount":1,"publisher":{"@id":"https:\/\/www.webcodegeeks.com\/#organization"},"image":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-mouseover-example-2\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/jquery-logo.jpg","keywords":["mouseover"],"articleSection":["jQuery"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-mouseover-example-2\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-mouseover-example-2\/","url":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-mouseover-example-2\/","name":"jQuery Mouseover Example - Web Code Geeks - 2026","isPartOf":{"@id":"https:\/\/www.webcodegeeks.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-mouseover-example-2\/#primaryimage"},"image":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-mouseover-example-2\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/jquery-logo.jpg","datePublished":"2015-09-29T09:15:09+00:00","dateModified":"2017-12-21T14:12:19+00:00","description":"The aim of this article is to explain the usage of .mouseover() method of jQuery. The mouseover event occurs when the mouse pointer is over the selected","breadcrumb":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-mouseover-example-2\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-mouseover-example-2\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-mouseover-example-2\/#primaryimage","url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/jquery-logo.jpg","contentUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/jquery-logo.jpg","width":150,"height":150},{"@type":"BreadcrumbList","@id":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-mouseover-example-2\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.webcodegeeks.com\/"},{"@type":"ListItem","position":2,"name":"JavaScript","item":"https:\/\/www.webcodegeeks.com\/category\/javascript\/"},{"@type":"ListItem","position":3,"name":"jQuery","item":"https:\/\/www.webcodegeeks.com\/category\/javascript\/jquery\/"},{"@type":"ListItem","position":4,"name":"jQuery Mouseover Example"}]},{"@type":"WebSite","@id":"https:\/\/www.webcodegeeks.com\/#website","url":"https:\/\/www.webcodegeeks.com\/","name":"Web Code Geeks","description":"Web Developers Resource Center","publisher":{"@id":"https:\/\/www.webcodegeeks.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.webcodegeeks.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.webcodegeeks.com\/#organization","name":"Exelixis Media P.C.","url":"https:\/\/www.webcodegeeks.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png","contentUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png","width":864,"height":246,"caption":"Exelixis Media P.C."},"image":{"@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/webcodegeeks","https:\/\/x.com\/webcodegeeks"]},{"@type":"Person","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/1dfb88b4a8d08c37a6080311fd330a22","name":"Fabio Cimo","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/b3df055f2e1b62e238889fafbb16121c68aab1adcd11af670e185cafae201b3b?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/b3df055f2e1b62e238889fafbb16121c68aab1adcd11af670e185cafae201b3b?s=96&d=mm&r=g","caption":"Fabio Cimo"},"description":"Fabio is a passionate student in web tehnologies including front-end (HTML\/CSS) and web design. He likes exploring as much as possible about the world wide web and how it can be more productive for us all. Currently he studies Computer Engineering, at the same time he works as a freelancer on both web programming and graphic design.","sameAs":["https:\/\/www.facebook.com\/fabiocimo","https:\/\/al.linkedin.com\/in\/fabiocimo","https:\/\/x.com\/fabiocimo","https:\/\/www.youtube.com\/fabiocimo1"],"url":"https:\/\/www.webcodegeeks.com\/author\/fabio-cimo\/"}]}},"_links":{"self":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts\/7224","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/users\/75"}],"replies":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/comments?post=7224"}],"version-history":[{"count":0,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts\/7224\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/media\/919"}],"wp:attachment":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/media?parent=7224"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/categories?post=7224"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/tags?post=7224"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}