Question

<form action="">
    <input type="text" value="" class="card-num" />
    <input type="text" value="" class="card-cvv2"/>
</form>

<div class="description">
    <p class="card-num">Enter your 16 digit card number</p>
    <p class="card-cvv2">Enter the 3 digit number at the back of your card</p>
</div>

All descriptions are hidden initially. But when hovered on an element that has a matching

tag, display description?

I’d really appreciate any help.

Many thanks!

Answer 1

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);
          }
        );