Created
March 25, 2014 11:14
-
-
Save bennadel/9759586 to your computer and use it in GitHub Desktop.
jQuery Events: MouseOver / MouseOut vs. MouseEnter / MouseLeave
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE HTML> | |
| <html> | |
| <head> | |
| <title>MouseOver / MouseOut vs. MouseEnter / MouseLeave</title> | |
| <style type="text/css"> | |
| #outer-mouseover { | |
| background-color: #F0F0F0 ; | |
| border: 1px solid #D0D0D0 ; | |
| float: left ; | |
| height: 225px ; | |
| margin-right: 20px ; | |
| position: relative ; | |
| width: 225px ; | |
| } | |
| #outer-mouseenter { | |
| background-color: #F0F0F0 ; | |
| border: 1px solid #D0D0D0 ; | |
| float: left ; | |
| height: 225px ; | |
| position: relative ; | |
| width: 225px ; | |
| } | |
| span.inner { | |
| background-color: #B3C9DF ; | |
| border: 1px solid #6492BF ; | |
| color: #FFFFFF ; | |
| height: 100px ; | |
| left: 62px ; | |
| line-height: 98px ; | |
| position: absolute ; | |
| text-align: center ; | |
| top: 62px ; | |
| width: 100px ; | |
| } | |
| </style> | |
| <script type="text/javascript" src="jquery-1.4a2.js"></script> | |
| <script type="text/javascript"> | |
| // When the DOM is ready, init scripts. | |
| jQuery(function( $ ){ | |
| // Bind the mouse over /out to the first DIV. | |
| $( "#outer-mouseover" ).bind( | |
| "mouseover mouseout", | |
| function( event ){ | |
| console.log( event.type, " :: ", this.id ); | |
| } | |
| ); | |
| // Bind the mouse enter to the second DIV. | |
| $( "#outer-mouseenter" ).bind( | |
| "mouseenter mouseleave", | |
| function( event ){ | |
| console.log( event.type, " :: ", this.id ); | |
| } | |
| ); | |
| }); | |
| </script> | |
| </head> | |
| <body> | |
| <h1> | |
| MouseOver / MouseOut vs. MouseEnter / MouseLeave | |
| </h1> | |
| <div id="outer-mouseover"> | |
| <span class="inner">MouseOver</span> | |
| </div> | |
| <div id="outer-mouseenter"> | |
| <span class="inner">MouseEnter</span> | |
| </div> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE HTML> | |
| <html> | |
| <head> | |
| <title>jQuery Hover Method</title> | |
| <style type="text/css"> | |
| #outer-hover { | |
| background-color: #F0F0F0 ; | |
| border: 1px solid #D0D0D0 ; | |
| height: 225px ; | |
| margin-right: 20px ; | |
| position: relative ; | |
| width: 225px ; | |
| } | |
| span.inner { | |
| background-color: #B3C9DF ; | |
| border: 1px solid #6492BF ; | |
| color: #FFFFFF ; | |
| height: 100px ; | |
| left: 62px ; | |
| line-height: 98px ; | |
| position: absolute ; | |
| text-align: center ; | |
| top: 62px ; | |
| width: 100px ; | |
| } | |
| </style> | |
| <script type="text/javascript" src="jquery-1.4a2.js"></script> | |
| <script type="text/javascript"> | |
| // When the DOM is ready, init scripts. | |
| jQuery(function( $ ){ | |
| // Bind the mouse enter and mouse leave events using | |
| // the convenience method, hover(). | |
| $( "#outer-hover" ).hover( | |
| function(){ | |
| console.log( "mouseEnter" ); | |
| }, | |
| function(){ | |
| console.log( "mouseLeave" ); | |
| } | |
| ); | |
| }); | |
| </script> | |
| </head> | |
| <body> | |
| <h1> | |
| jQuery Hover Method | |
| </h1> | |
| <div id="outer-hover"> | |
| <span class="inner">Hover</span> | |
| </div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment