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>标记上设置“mouseover”和“mouseout”处理程序，这些标记仅显示具有匹配类的<p>。

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

（未经测试，但可能很接近。）

关于悬停的描述

3 个答案: