JQuery mouseenter(), hover(), mouseleave() Examples
Using below example we can do the mouse enter and mouse leave events using jquery.
Below example will show the inside list span tag text on mouse over.
Below example will show the inside list span tag text on mouse over.
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<style type="text/css">
ul
{
margin-left: 20px;
color: blue;
}
li
{
cursor: default;
}
span
{
color: green;
display: none;
}
</style>
<script type="text/javascript">
//first way to do one mouse over and mouse leave -- using toggle
$(function () {
$(".category").hover(function () {
$(this).find("span").toggle();
});
});
//Second way to do mouseenter and mouse leave event.
$(function () {
$(".category1").mouseenter(function () {
$this = $(this);
$this.find("span").css("display", "block");
}).mouseleave(function () {
$this = $(this);
$this.find("span").hide();
}); }); </script>
</head> <body> <ul> <li class='category'> <span>aspnettutorialonline.blogspot.com</span> </li> <li class='category'><span>aspnettutorialonline.blogspot.com</span>
</li> <li class='category'><span>aspnettutorialonline.blogspot.com</span>
</li> </ul>
<ul> <li class='category1'> <span>aspnettutorialonline.blogspot.com</span> </li> <li class='category1'><span>aspnettutorialonline.blogspot.com</span> </li> <li class='category1'><span>aspnettutorialonline.blogspot.com</span> </li> </ul> </body> </html>Output:
How to implement validations on form controls using javascript before a postback occurs.
If we are using submit button in the form, we have to validation data before sending to the server. For this on submit we will call the javascript method. from the method we will return true or false based on the validation result.
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
function Validate() {
//Need to do validations here.
//If any thing fails we have to return false other wise request go to server
}
</script>
</head> <body> <form onsubmit="return Validate()"> ... all controls will go here with submit button... </form>
</body> </html>
If you have any queries or suggestions, please feel free to ask in comments section.
Difference between JavaScript and JScript?
JScript is the Microsoft ECMAScript scripting language specification.
JavaScript (Netscape/Mozilla implementation of the ECMA scripting language specification), JScript, and ECMAScript are very similar languages. But "JavaScript" is often used to refer to ECMAScript or JScript.
When to load CSS Files while working with JQuery?
JQuery is recommending to load all CSS files before firing ready event.
