Home > Developer > Web Develop
<!DOCTYPE HTML><HTML><Head> <title>Event binding Mouse Hover</title> <Scriptsrc= "Jquery-3.1.1.js"></Script> <Script> </Script> <styletype= "Text/css">. Head{width:200px;Border:1px solid #000;Background-color:#ccc; }. Content{Display:None; } </style></Head><Body> <H2class= "Head">Event Bindings</H2> <Divclass= "Content">This is a piece of text</Div></Body></HTML>
The HTML CSS code starts with the jquery code as above
Getting Started (click)
<Script> $('. Head'). Bind ('Click',function(){ $( This). Next (). Show (); }); </Script>
Add effect mouse Click title Display, click Hide here
<script> $ ('. Head '). bind (' click ',function() { var $content = $ ( This ). Next (); if ($content. Is (': Visible ')} { $content. Show (); } Else { $content. Hide (); } }); </script>Advanced--Change event binding type
<script> $ (function () {
$ ('. Head '). Bind (' MouseOver ', function () {
$ (this). Next (). Show (); }). bind (' mouseout ', function() {$ ('. Content '). Hide (); });
</script>
Proficient--Shorthand binding event
<script> $ (function() { $ ('. Head '). MouseOver (function() { $ (this). Next (). Show (); }). Mouseout (function() { $ (this). Next (). Hide (); }) </script>The Ashes grade thought the shorthand was simple, and did not expect jquery to provide an easier way.
$ (function() { ///Hover () method $ ('. Head '). Hover (function() { $ (this). Next (). Show (); },function() { $ ( this). Next (). Hide (); } );Event Bindings Mouse Hover-Getting started-advanced-mastery-ashes (from the sharp jquery)
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
