html/css 悬停 - 添加填充底部而不移动其余元素

Question

我正在尝试使用标签（我不确定如何称呼它们）。当一个选项卡悬停时，它会增加该选项卡的 padding-bottom（视觉上看起来它出现了）。

那些，将位于导航的顶部，所以我将它们放在了 header 的底部。

问题是，它移动了所有选项卡！不仅仅是我徘徊的那个。我一直在改变 .actionsWrap absolute/relative 和 adding/removing 的位置 div，但没有像我预期的那样工作。此外，这些容器需要绝对定位到 header.

有人能看出我做错了什么吗？请参阅附带的 jsfiddle，因为您可以更容易地理解我的意思。

https://jsfiddle.net/0yu921xp/

html

<header>
    <div class="container">
        <div class="actionsWrap">
            <div class="actions">
                <div><a class="search fa fa-2x fa-search" href="" alt="" title=""></a></div>
                <div><a class="help fa fa-2x fa-question" href="" alt="" title=""></a></div>
                <div><a class="call fa fa-2x fa-phone" href="" alt="" title=""></a></div>
            </div>
        </div>
        <img class="logo" src="ttp://res.cloudinary.com/demo/ image/upload/ w_133,h_133,c_thumb,g_face/ bike.jpg" alt=""/>
    </div>
</header>

css

header 
{
    position: relative;
    height: 200px;
    border-bottom: 1px solid black;
}

header .actionsWrap 
{
    position: absolute;
    bottom: 0; 
}

header .actionsWrap .actions 
{
    position: relative; 
}

header .actionsWrap .actions div 
{
    position: relative;
    float: left;
    width: 50px; 
}

header .actionsWrap .actions div a 
{
    padding: 15px;
    text-align: center;
    display: block; 
}

header .actionsWrap .actions div a:hover 
{
    padding-bottom: 30px; 
}

header .actionsWrap .actions .search 
{
    color: khaki;
    background-color: darkcyan; 
}

header .actionsWrap .actions .help 
{
    color: darkblue;
    background-color: lightblue; 
}

header .actionsWrap .actions .call 
{
    color: yellowgreen;
    background-color: bisque; 
}

谢谢

Answer 1

由于这些元素上有 float，因此您无法控制垂直对齐方式，因此一种选择是使用 inline-block：

header .actionsWrap .actions div {
   position: relative;
   display:inline-block;
   margin-right:-4px;
   vertical-align:bottom;
   width: 50px; 
}

Jsfiddle Demo

Answer 2

将display: inline属性添加到<a>，如：

header .actionsWrap .actions div a:hover {
  display: inline;
}

查看更新后的 fiddle 或以下代码段：

header {
  position: relative;
  height: 200px;
  border-bottom: 1px solid black;}
  header .actionsWrap {
    position: absolute;
    bottom: 0; }
    header .actionsWrap .actions {
      position: relative; }
      header .actionsWrap .actions div {
        position: relative;
        float: left; }
        header .actionsWrap .actions div a {
          padding: 15px;
          text-align: center;
          display: block; }
          header .actionsWrap .actions div a:hover {
            padding-bottom: 30px; display: inline; }
      header .actionsWrap .actions .search {
        color: khaki;
        background-color: darkcyan; }
      header .actionsWrap .actions .help {
        color: darkblue;
        background-color: lightblue; }
      header .actionsWrap .actions .call {
        color: yellowgreen;
        background-color: bisque; }

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
    <header>
      <div class="container">
        <div class="actionsWrap">
         <div class="actions">
           <div><a class="search fa fa-2x fa-search" href="" alt="" title=""></a></div>
            <div><a class="help fa fa-2x fa-question" href="" alt="" title=""></a></div>
            <div><a class="call fa fa-2x fa-phone" href="" alt="" title=""></a></div>
        </div>
      </div>
        
      <img class="logo" src="ttp://res.cloudinary.com/demo/ image/upload/ w_133,h_133,c_thumb,g_face/ bike.jpg" alt=""/>
      </div>
    </header>

希望对您有所帮助！

Answer 3

编辑：添加了第二个解决方案

1.) 要添加 space 延伸到容器的边界之外：

将 .actionsWrap 的位置从 bottom: 0 更改为 top:138px 以将其顶部边框固定到其容器的顶部而不是底部边框固定到容器的底部：

header .actionsWrap {
  position: absolute;
  top: 138px; 
}

https://jsfiddle.net/wn0ndeca/1/

2.) 使悬停时三个元素的底部边框仍然与容器的底部边框对齐：

将 .actions div 的显示更改为 inline-blocks 和 vertical-align: bottom;

header .actionsWrap .actions div {
    display: inline-block;
    vertical-align: bottom;
    width: 50px; 
}

https://jsfiddle.net/qqghpuj3/1/

（请注意稍微更改 HTML 代码以避免三个元素之间出现白色 space）

html/css 悬停 - 添加填充底部而不移动其余元素

html/css on hover - add padding bottom not moving rest of elements

html

css

position

absolute

Jsfiddle Demo