Have you seen before that some of the website that having very cool effects, such as the whole page turned dark and only highlight the specific object when user mouse over that specific object? Are you wondering how the effect to be done?

Today, onlyWebPro is going to show you how to create a focus object when user mouse over the specific object with JQuery.

Tutorial Details Difficulty: Intermediate

Technology: HTML4+, CSS2, JQuery

Supported Browser: Firefox 4.0+, Chrome 5+, Safari 4+, Internet Explorer 7+

Demo Apple

Boy

Cat

Dog

Engine

Cool right? let’s start our tutorial!

1. HTML

<!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Create Focus With JQuery</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"> </script> </head> <body> <ul class="demo-fade"> <li>Apple</li> <li>Boy</li> <li>Cat</li> <li>Dog</li> <li>Engine</li> </ul> </body> </html>

Prepare a HTML structure as shown above. In this example, we need JQuery to create the focus point effect, so we link it to the JQuery at Google Library API.

2. CSS

.demo-fade li { background: #FF0000; cursor: pointer; height: 25px; list-style-type: none; padding: 10px; width: 50px; }

Next, we style our object into red, with 25px height, 10px padding and 50px width.

3. JavaScript

$(document).ready(function() { //When user mouse over one of the item $(".demo-fade").children().hover(function() { //reduce the opaicty of its other sibiling elements $(this).siblings().stop().fadeTo(500,0.4); // When mouse leave }, function() { //return the original value of opacity $(this).siblings().stop().fadeTo(500,1); }); });

Here is the magic to create the focus point. We use the JQuery API ‘sibling()’ to tell the browser select specific mouse over object’s sibling to fade out and fade in the opacity of the object in half second. It’s easy right? The final code as shown below:

Final Code

<!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"> </script> <script type="text/javascript"> $(document).ready(function() { //When user mouse over one of the item $(".demo-fade").children().hover(function() { //reduce the opaicty of its other sibiling elements $(this).siblings().stop().fadeTo(500,0.4); // When mouse leave }, function() { //return the original value of opacity $(this).siblings().stop().fadeTo(500,1); }); }); </script> <style> .demo-fade li { background: #FF0000; cursor: pointer; height: 25px; list-style-type: none; padding: 10px; width: 50px; } </style> </head> <body> <ul class="demo-fade"> <li>Apple</li> <li>Boy</li> <li>Cat</li> <li>Dog</li> <li>Engine</li> </ul> </body> </html>