Displaying data on Hover using Jquery and HTML

By Karan Ratta
This feature is used to display the details relating to each photo when the user's mouse is in that area of the page.For our first pass at displaying this information, we use the .hover() method.When the cursor enters a photo's boundary, the associated information fades in to 70 percent opacity, and when it leaves, the information fades back out.There are, of course, multiple ways to perform this task. Since a portion of each handler is the same, it's possible to combine the two handlers to reduce code duplication.You can download the source code of this topic.
 
displaying data on hovering using Jquery

JavaScript.js
<script type="text/javascript">
$(document).ready(function() {
$('.photo').hover(function() {
$(this).find('.details').fadeTo('fast', 0.7);
}, function() {
$(this).find('.details').fadeOut('fast');
});
});
</script>

Hey Readers, I am a tech blogger along with a daytime Network Security Engineer in a American based company. I love to keep an eyes on tips and tricks.related to Android, IOS, Windows and How to things.

Comments

Post a Comment

Popular posts from this blog

How to configure Route Redistribution of BGP, OSPF and EIGRP in Cisco Packet Tracer

By Karan Ratta
Image
It is  straightforward  to  put together  route re distribution  of EIGRP, OSPF & BGP in Cisco Packet tracer. Basically, Route  distribution   permits  routes from one routing protocol to be  publicised  into another routing protocol. I t's   preferred   to use   one  routing protocol in  internetwork  surroundings , for simplicity and  easy  management. S adly ,  this can be  not  invariably   doable ,  creating  multi-protocol environments common. Routes  can   solely  be  decentralized  if they exist  within the  routing table. Routes that  area unit   merely   in a very  topology  info. At least one  distribution   purpose   must  exist between  the 2  routing domains.  This device  can   really  run  each  routing ...
Read more

Friend Request System Using PHP and MYSQL

By Karan Ratta
Image
Facebook site gave its members an easy way to connect with each other one-on-one based on shared interests and other profile information.So, this post is tells how you can make your own friend request process using a simple codes of PHP and Mysql. This project starts with the login & signup process in which you have to first login with your valid email ID or password you can send request to the particular friend, accept or delete friend request or even unfriend option are also resides in this project  Let's start Database Design: In this tutorial there are three tables: 1. Signup table id int (5) email varchar (100) username varchar (50) photo varchar (150) password varchar (25) 2. Request table id int (5) from varchar (100) email varchar (100) 3. My Friend table id int (5) email varchar (100) friend varchar (100) Send Friend Request : This is the first step in which you have to send friend request to the person and it depends on him ...
Read more

Login, Signup and Logout Script using PHP and MySQL

By Karan Ratta
Image
Login, Signup or Logout these are the three things which you have  done in daily social networking sites.So, today post is related to that one.Firstly,I will show you how the signup process work .In my project i have taken three fields E-Mail, Username and password.We select email as a primary key. Database Design: email varchar(100)  PRIMARY KEY.. username varchar(100) password varchar(30) Signup Form: <form name="form1" action="index.php" method="POST"> <input  type="email" name="email" placeholder="E-Mail"  ><br> <input type="text" name="uname" placeholder="Username"  ><br> <input  type="password" name="pwd" placeholder="Password" ><br> <input name="signup" type="submit" value="Sign Up"> Signup.php In this PHP file i will show you some query and logics. ...
Read more