时间戳

首页 > 解决方案 > 悬停时展开向下按钮

html - 悬停时展开向下按钮

问题描述

我有简单的扩展按钮。它向上扩展，但我希望它向下扩展。我正在尝试对位置做一些事情，但是如果没有 js 和动画，我无法做到。

.outer-bottomleft {
  position: absolute;
  bottom: 20%;
  left: 2%;     
  display: flex;
  color: black;     
  flex-direction: row;     
}
.outer-bottomleft .bottomleft {
  display: none;
}
.outer-bottomleft:hover .bottomleft {
  display: flex;
}
.outer-bottomleft:hover .hide-button {
  display: none;
}
.shop-button-left {
  width: 50%;     
}
.shop-button-right {
  width: 50%;
}
  <div class ="outer-bottomleft"> <span class ="hide-button btn-shop">SHOP 
  </span>
  <div class="bottomleft"> <div class = "shop-button-left">
    NEW FLAVOR:
   
  
  SHOP
 </div>
   
    <div class = "shop-button-right">
    <a href="#">
    Test
  </a>
  </div>  

</div>  
</div>

标签： htmlcss

解决方案

按照您的设置方式，您.outer-bottomleft将永远20%远离bottom.

一个临时的解决方案是给予.hide-button.btn-shop和财产.bottomleftposition: absolute

.outer-bottomleft {
  position: absolute;
  bottom: 20%;
  left: 2%;
  display: flex;
  color: black;
  flex-direction: row;
}

.outer-bottomleft .bottomleft {
  display: none;
}

.outer-bottomleft:hover .bottomleft {
  display: flex;
}

.outer-bottomleft:hover .hide-button {
  display: none;
}

.shop-button-left {
  width: 50%;
}

.shop-button-right {
  width: 50%;
}

.hide-button.btn-shop,
.bottomleft {
  position: absolute;
}
<div class="outer-bottomleft"> <span class="hide-button btn-shop">SHOP 
  </span>
  <div class="bottomleft">
    <div class="shop-button-left">
      NEW FLAVOR: SHOP
    </div>

    <div class="shop-button-right">
      <a href="#">
    Test
  </a>
    </div>

  </div>
</div>

推荐阅读