Question

我是网页设计的新手，我想横向放置4个div，每个div的中心都有一个小图像;鼠标悬停在该图像上时，该div应放大显示更多内容。这是'加'图像链接 -

http://www.nike.com/etc/designs/nike/pes/images/plus.png

<div id="hov_text"
    style="position: relative; width: 1350px; height: 400px; margin- top: 20px;">
    <div id="ord1">
        <h3 style="padding-left: 50px; padding-right: 20px; color: black;">SHOES</h3>
        <h5 style="padding-left: 50px; padding-right: 20px;">MEN'S SHOES</h5>
        <h5 style="padding-left: 50px; padding-right: 20px;">Running</h5>
        <h5 style="padding-left: 50px; padding-right: 20px;">Basketball</h5>
        <h5 style="padding-left: 50px; padding-right: 20px;">NikeiD</h5>
        <h5 style="padding-left: 50px; padding-right: 20px;">Soccer</h5>
        <img class="ord1_img"
            style="height: 20px; margin-left: 100px; width: 30px;"
            src="img/plus.png" />
        <hr>
    </div>
    <div id="ord2"
        style="margin-top: 20px; margin-left: 10px; float: left; width: 20%; height: 200px; background-color: #ffffff; border-right: 2px solid #d9d8cd;">
        <h3 style="padding-left: 50px; padding-right: 20px; color: black;">Clothing</h3>
        <h5 style="padding-left: 50px; padding-right: 20px;">MEN'S
            CLOTHING</h5>
        <h5 style="padding-left: 50px; padding-right: 20px;">T-Shirts</h5>
        <h5 style="padding-left: 50px; padding-right: 20px;">Jackets &
            Vests</h5>
        <h5 style="padding-left: 50px; padding-right: 20px;">Hoddies &
            Swetshirts</h5>
        <h5 style="padding-left: 50px; padding-right: 20px;">Pants</h5>
        <img class="ord1_img"
            style="height: 20px; margin-left: 100px; width: 30px;"
            src="img/plus.png" />
        <hr>
    </div>
    <div id="ord3"
        style="margin-top: 20px; margin-left: 10px; float: left; width: 20%; height: 200px; background-color: #ffffff; border-right: 2px solid #d9d8cd;">
        <h3 style="padding-left: 50px; padding-right: 20px; color: black;">GEAR</h3>
        <h5 style="padding-left: 50px; padding-right: 20px;">MEN'S GEAR</h5>
        <h5 style="padding-left: 50px; padding-right: 20px;">Accessories</h5>
        <h5 style="padding-left: 50px; padding-right: 20px;">SPARQ</h5>
        <h5 style="padding-left: 50px; padding-right: 20px;">Socks</h5>
        <h5 style="padding-left: 50px; padding-right: 20px;">Bags &
            Backpacks</h5>
        <img class="ord1_img"
            style="height: 20px; margin-left: 100px; width: 30px;"
            src="img/plus.png" />
        <hr>
    </div>
    <div id="ord4"
        style="margin-top: 20px; margin-left: 10px; float: left; width: 20%; height: 200px; background-color: #ffffff;">
        <h3 style="padding-left: 50px; padding-right: 20px; color: black;">Others</h3>
        <h5 style="padding-left: 50px; padding-right: 20px;">Clearence</h5>
        <h5 style="padding-left: 50px; padding-right: 20px;">ASDF</h5>
        <h5 style="padding-left: 50px; padding-right: 20px;">NFL</h5>
        <h5 style="padding-left: 50px; padding-right: 20px;">Sportswear</h5>
        <h5 style="padding-left: 50px; padding-right: 20px;">Soccer</h5>
        <img class="ord1_img"
            style="height: 20px; margin-left: 100px; width: 30px;"
            src="img/plus.png" />
        <hr>
    </div>
</div>

Answer 1

您可以在jquery中使用动画函数，

查看this链接，这可能会对您有所帮助

Answer 2

检查以下链接，以帮助您解决问题：

Relatively Simple 3 Equal-Height Columns CSS Liquid Layout

3 columns fluid layout

Example of 3 columns layout

3 columns layout via DIVs (middle-flexible, all flexible height, STRICT mode)

将鼠标悬停在div上的div上，该图像位于该div的中心

2 个答案: