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:
Post a Comment