O'Reilly logo

Instant jQuery Boilerplate for Plugins by Jonathan Fielding

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

jQuery Hover panels with jQuery Boilerplate (Simple)

Hover panels are becoming increasingly popular on websites with the default starting content being replaced with alternative content on hover, usually with an animation for the transition between the two pieces of content. For this task we are going to create such a plugin. To transition between the two pieces of content, we will simply hide the default content and show the hover content.

Getting Ready

We will once again use the template, which we had previously set up.

How to do it...

  1. Our first step is to make our HTML ready. All our panels need to be encapsulated within a container; in our case, we will call our container hoverpanels:
    <div class="hoverpanels">
    </div>
  2. Then we need to define our panels; ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required