Описания на Hover

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>

Все описания изначально скрыты.Но когда вы наведете курсор на элемент с соответствующим тегом

, отобразите описание?

Я бы очень признателен за любую помощь.

Большое спасибо!

Answer 1

$(document).ready(
  function() {

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

Демо на jsbin: http://jsbin.com/ecosu3/2

Answer 2

Появление и исчезновение или другой необходимый эффект, используйте .show () и .hide () для простого представления без эффектов.

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

Answer 3

Установите обработчики для «наведения мыши» и «наведения мыши» для тегов <input>, которые показывают только <p> с соответствующим классом.

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

(Не проверено, но, вероятно, близко.)