Question

尝试让我的背部和下一个按钮有一个动画“背景”由a：元素悬停时创建。后面和下一个按钮位于页面的两侧，是帖子的文本，因此我无法完全控制其内容。我希望背景块在文本后面从一侧延伸到另一侧（从下到右，在前一个从左到右）。

我希望背景块（：在元素之前）是它后面的文本的完整高度和宽度（文本有填充）

css（我忽略了过渡：css，直到我能让它正常工作。）

#nav-BN {
  position: relative;
  display: block;
  padding: 0;
  margin: 50px 0;
}

.nav-previous, .nav-next { 
  display: block; 
  position: absolute;
  z-index: 1;
}

.nav-previous { left: 0; }
.nav-next { right: 0; }

.nav-previous a, .nav-next a { 
  display: block;
  position: relative;
  z-index: 2;
  text-align: center;
  color: #333;
  padding: 10px 20px;
}

.nav-previous a:before, .nav-next a:before { 
  display: inline-block;
  position: absolute;
  content: '';
  left: 0; top: 0;
  height: 100%; width: 0%;
  background-color: #000;
}

.nav-previous a:hover:before, .nav-next a:hover:before { width: 100%; }

.nav-previous:before { transform-origin: left center; }
.nav-next:before { transform-origin: right center; }

<div id="nav-BN">
   <div class="nav-previous">
      <a>link</a>
   </div>

   <div class="nav-next">
      <a>link</a>
   </div>
</div>

我遇到的问题是使用100％宽度，使其成为屏幕的全宽而不是包含div。悬停等时跳到页面的文字

Answer 1

https://cssanimation.rocks/pseudo-elements/

希望这会有所帮助。不确定你到底想要做什么 -

Answer 2

我以前使用过这个，我认为这正是你要找的： http://ianlunn.github.io/Hover/

使用示例hvr-shutter-out-horizontal： <a class="hvr-shutter-out-horizontal" href="#">Shutter Out Horizontal</a> 但是将.hvr-shutter-out-horizontal的css更改为background：transparent;

Answer 3

我想你应该试试

弹性框

动画：在悬停元素之前

3 个答案: