javascript - 悬停标题以显示文本

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

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