Hoverヘッダーからテキストを表示

Question

隠しテキストを表示するために、htmlで作成したヘッダーをホバーしたいが、jQueryでそれを行う方法を理解できない。

私は以下のhtmlを持っています。印刷専用ヘッダーがあり、テキストHeyを含むdivを表示したいのですが。

<fieldset class="formats"> 
    <legend>Format Interested</legend> 
    <div class="col1"> 
     <h2 class="test">Print Only</h2> 
     <div class="info"><p>Hey</p></div> 
     <input type="checkbox" name='PrintOnly[]' value='8x12' />8" x 12" - $50.00 USD<br /> 
     <input type="checkbox" name='PrintOnly[]' value='12x18' />12" x 18" - $90.00 USD<br /> 
     <input type="checkbox" name='PrintOnly[]' value='16x24' />16" x 24" - $125.00 USD<br /> 
     <input type="checkbox" name='PrintOnly[]' value='20x30' />20" x 30"- $160.00 USD 
    </div> 
    <div class="col2"> 
     <h2>Framed Prints</h2> 
     <input type="checkbox" name='FramedPrints[]' value='8x12' />8" x 12"- $175.00 USD*<br /> 
     <input type="checkbox" name='FramedPrints[]' value='12x18' />12" x 18"- $230.00 USD*<br /> 
     <input type="checkbox" name='FramedPrints[]' value='16x24' />16" x 24"- $375.00 USD*<br /> 
     <input type="checkbox" name='FramedPrints[]' value='20x30' />20" x 30"- $425.00 USD* 
     <p><em>* Frame prices can vary based on framing materials used.</em></p> 
    </div> 
    <div class="col3"> 
     <h2>Floating Gallery Wrap</h2> 
     <input type="checkbox" name='FloatingGalleryWrap[]' value='8x12' />8" x 12"- $115.00 USD<br /> 
     <input type="checkbox" name='FloatingGalleryWrap[]' value='16x24' />16" x 24"- $275.00 USD<br /> 
     <input type="checkbox" name='FloatingGalleryWrap[]' value='20x30' />20" x 30"- $360.00 USD 
    </div> 
    <div class="col4"> 
     <h2>Fine Art Canvas Print</h2> 
     <input type="checkbox" name='FineArtCanvasPrint[]' value='12x28' />12" x 28" - $200.00 USD<br /> 
     <input type="checkbox" name='FineArtCanvasPrint[]' value='16x24' />16" x 24" - $275.00 USD<br /> 
     <input type="checkbox" name='FineArtCanvasPrint[]' value='20x30' />20" x 30" - $360.00 USD 
    </div> 
</fieldset> 
<input type="hidden" name="photoid" value="<?php echo $photo['Photo']['id'];?>"/> 
<input type="hidden" name="galleryname" value="<?php echo $photo['Gallery']['name'];?>"/> 
<input type="hidden" name="photofilename" value="<?php echo $photo['Photo']['filename'];?>"/> 
<input class="buttonsend" id="ajaxformsend" type="button" value="Send Request" onclick="sendform();return false;"/><div class="cleaner"></div> 

</div> 
</form> 

Answer 1

まあ、私はそれを開始するためantimatterfishする信用を与えるために持っているが、私はあなたが望むようにそれをクリーンアップだと思います。

http://jsfiddle.net/8a8T7/

ホバー "ねえ" 見えるを作るために "のみ印刷" を超えます。

Answer 2

$('.test').hover(
function(){ $('.info').show();}, 
    function(){ $('.info').hide(); 
});