Question

我想在屏幕的左侧和右侧之间创建一个悬停效果，因此看起来左侧的“背景”在光标之后向右移动。我尝试了一些操作，但是当光标位于左侧和右侧之间的中心时，它有些迟钝...有什么建议吗？谢谢您的帮助！！

HTML

<div class="container">

    <div class="wrap">
        <div class="middle btn-0 left"><span>left</span></div>
    </div>

    <div class="wrap">
        <div class="middle btn-1 right"><span>right</span></div>
    </div>
</div>

CSS

.container {width: 100vw;height:100vh;font-size:120px;}

.left:hover.left span {
    z-index: 200; 
    color:white; 
    position:absolute;}

.left:hover › .right span {color:black!important;}

.right span {
   z-index: 20;
   position:absolute; 
   color:white;}

.right:hover.right span {color:white;}

.middle {
   width: 50%;
   float:left;
   height:100vh;
   overflow: hidden;
        }

html *,
html *:before,
html *:after {transition: 0.35s ease-in-out;}

[class^="btn-"] {
   position: relative;
   display: block;
   width: 50%;
   height: 100%;}

.btn-0:before {
   content: '';
   position: absolute;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   background-color: black;
   -webkit-transform: translateX(50%);
   transform: translateX(50%);}

.btn-0:hover:before {
   -webkit-transform: translateX(-50%);
   transform: translateX(-50%);}

JS Fiddle here

使用translateX“相反颜色”进行全屏左右悬停效果

0 个答案: