[jQuery] Descriptions on Hover

Answer 1

Set up handlers for "mouseover" and "mouseout" on the <input> tags that show only the <p> with matching class.

$('form input').mouseover(function() {
  $('div.description p').hide();
  $('div.description p.' + this.className).show();
}).mouseout(function() {
  $('div.description p').hide();
});

(Not tested, but it's probably close.)

Answer 2

$(document).ready(
  function() {

    $('div.description p').hide();
          $('input').hover(
        function() {
            var matchingExplanationClass = $(this).attr('class');
            $('p.'+matchingExplanationClass).toggle();
        }
    );
  }
  );

Demo at jsbin: http://jsbin.com/ecosu3/2

Answer 3

Fade in and out, or other effect you need, use .show() and .hide() for a simple no effects presentation.

   var thisClass; 
     $('input').hover(
          function () {
            thisClass = $(this).attr('class');
            $('description.'+thisClass).fadeIn(100)
          }, 
          function () {
            $('description.'+thisClass).fadeOut(100);
          }
        );