我目前有一个由四个 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;
}
有人知道如何解决这个问题吗?
最佳答案
添加vertical-align: top;
至 .Home, .Menu, .Order, .Review
inline-block
元素与 bottom
对齐取最高元素 vertical-align: baseline;
默认,但你可以 align
它到 top
通过添加 vertical-align:top
关于html - 修复元素,以便只有悬停在上面的元素会延伸?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29586620/