<!DOCTYPE HTML Public "-//W3C//DTD XHTML 1.0 transitional//en" "http://www.w3.org/TR/xhtml1/DTD/ Xhtml1-transitional.dtd "><HTMLxmlns= "http://www.w3.org/1999/xhtml"><Head><Metahttp-equiv= "Content-type"content= "text/html; charset=utf-8" /><title>Untitled Document</title><styletype= "Text/css">Body{font-size:100%;font-family:"Microsoft Yahei", "Arial";background:#fff;}#nav{position:relative;width:832px;_width:835px;margin:100px Auto 0 Auto;Border-bottom:2px #ddd Solid;}#nav. Nav-menu{Height:50px;}#nav. Nav-menu a{Display:Block;float: Left;Height:50px;padding:0 40px;Line-height:50px;Color:#666;font-size:16px;text-decoration:None;}#nav. Nav-current{position:Absolute;Bottom:-2px;Height:2px;Overflow:Hidden;background:#80b600;}</style><Scripttype= "Text/javascript"src= "Http://www.webskys.com/skin/tomato/js/jquery.js"></Script><Scripttype= "Text/javascript">$(function(){ varCur_width=$(". current"). Innerwidth ();//width of current a varCur_left=$(". current"). Position (). Left;//the left position of the current a $(". Nav-current"). css ({width:cur_width,left:cur_left})//the current bottom line $("#nav"). Find ("a"). Hover (function(){ $(". Nav-current"). Stop (). Animate ({left: $ ( This). Position (). Left, Width: $ ( This). Innerwidth}, -); } , function() { $(". Nav-current"). Stop (). Animate ({width:cur_width,left:cur_left}, -); } ) })</Script></Head><Body><DivID= "NAV"><Divclass= "Nav-menu"><ahref="#">Home</a><ahref="#"class= "Current">Learn About Us</a><ahref="#">Product Show</a><ahref="#">Service Quote</a><ahref="#">Latest News</a><ahref="#">Contact information</a></Div><Divclass= "Nav-current"></Div></Div></Body></HTML>
Initial
When the mouse is placed on a, the Green Line animates to the A
Knowledge Points:
Hover (Over,out) a method that mimics the hover event (moving the mouse over an object and moving out of the object). This is a custom method that provides a "keep in" state for frequently used tasks.
The first function that is specified is triggered when the mouse moves over a matching element. When the mouse moves out of this element, the specified second function is triggered. Also, it is accompanied by detection of whether the mouse is still in a particular element (for example, an image in a div), and, if so, continues to remain in a "hover" state without triggering a move-out event (fixed a common error using the Mouseout event).
Parameters :
Over (function) : Moves the mouse over the element to be triggered
Out (function): The mouse moves out of the element to be triggered
Example:
A table with a mouse hover plus a specific class
JQuery Code:
$ ("TD"). Hover ( function () { $ (this). addclass ("Hover"); }, function () { $ (this). Removeclass ("hover"); }); 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
