Question

我目前有一个由四个div组成的顶级菜单：Home，Menu，Order和Review。我设置它使每个div在悬停时延伸100px。这一切都很好。然后我在每个div的扩展区域中添加了一些单词和一个图像。现在，每当我将鼠标悬停在任何一个div上时，它就会延伸，但它带有剩下的div。我想要它，只有我在盘旋的div才会延伸，其余的将保持原样。这是html：

<div class="TopNav">
            <a href="file:///C:/Users/Justin/SkyDrive/Documents/Websites/Snack%20Shack%202/SS2.html"><div class="Home">
                <h4>Home</h4> <br><br>
                <p>Learn about us!</p>
                <img class="Hamburger" src="http://i.imgur.com/0htcpM2.png" title="source: imgur.com" />
            </div></a>

            <a href="file:///C:/Users/Justin/SkyDrive/Documents/Websites/Snack%20Shack%202/SS2%20Menu.html"><div class="Menu">
                <h4>Menu</h4>
            </div></a>

            <a href="file:///C:/Users/Justin/SkyDrive/Documents/Websites/Snack%20Shack%202/SS2%20Order.html"><div class="Order">
                <h4>Order</h4>
            </div></a>

            <a href="file:///C:/Users/Justin/SkyDrive/Documents/Websites/Snack%20Shack%202/SS2%20Review.html"><div class="Review">
                <h4>Review</h4>
            </div></a>
        </div>

这是css：

.Home:hover, .Menu:hover, .Order:hover, .Review:hover{
    height: 150px;
}

.Home, .Menu, .Order, .Review {
    height:50px;
    width:100px;
    display:inline-block;
    position:relative;
    z-index:1;
    transition: height .5s ease-in-out;
    -webkit-transition: height .5s ease-in-out;
    overflow:hidden;
}

.Home p, .Menu p, .Order p, .Review p {
    text-align:right;
    color:white;
    position:relative;
    right:2px;
    bottom:5px;
}

.Home h4, .Menu h4, .Order h4, .Review h4 {
    text-align:center;
    color:white;
    position:relative;
    bottom:5px;
    font-family:Garamond;
}

.Hamburger {
    height:40px;
    width:auto;
    position:relative;
    left:50px;
    top:10px;
    display:inline-block;
}

有谁知道如何解决这个问题？

Answer 1

将vertical-align: top;添加到.Home, .Menu, .Order, .Review

inline-block元素通过将bottom作为默认值来与最高元素的vertical-align: baseline;对齐，但您可以通过添加{align将其top添加到vertical-align:top 1}}

演示 - http://jsfiddle.net/hsj2ebc2/1/

修复元素，只有悬停在上面的元素延伸？

1 个答案: