仅当文本与 div 重叠时无法更改字体颜色

Question

I'm trying to change the font color to white only when the selector is overlapping the text and couldn't find a solution.

想要的行为如下：

1. Change the font color to white only when the selector is overlapping.
2. 将活动标签的字体大小增加到 18px
3. 选择器应移动到活动选项卡。

我已经尝试了几件事，但似乎都没有奏效。

这就是我现在所拥有的： https : //codepen.io/galanflorind/pen/gOpQKPP

 var tabs = $('.tabs'); var selector = $('.tabs').find('a').length; var activeItem = tabs.find('.active'); var activeWidth = activeItem.innerWidth(); $(".selector").css({ "left": activeItem.position.left + "px", "width": activeWidth + "px" }); $(".tabs").on("click","a",function(e){ e.preventDefault(); $('.tabs a').removeClass("active"); $(this).addClass('active'); var activeWidth = $(this).innerWidth(); var itemPos = $(this).position(); $(".selector").css({ "left":itemPos.left + "px", "width": activeWidth + "px" }); // Temporary fix for resizing after the transition is done // TODO: find another solution setTimeout(() => { var activeWidth = $(this).innerWidth(); var itemPos = $(this).position(); $(".selector").css({ "left":itemPos.left + "px", "width": activeWidth + "px" }); }, 401) });

 @import url('https://fonts.googleapis.com/css?family=Nunito'); body{ height:100vh; display:flex; flex-direction:column; justify-content:center; align-items:center; } .wrapper{ text-align:center; margin:50px auto; font-family: 'Nunito', sans-serif; } .tabs{ font-size:15px; padding:0px; list-style:none; display:inline-block; border-radius:50px; position:relative; } .tabs a{ text-decoration:none; color: #2f3059; text-transform:uppercase; padding:6px 20px; display:inline-block; position:relative; z-index:1; transition-duration: 0.4s; } .tabs a.active{ color:#fff; font-size: 18px; } .tabs .selector{ height:100%; display:inline-block; position:absolute; background: #3e40db; left:0px; top:0px; z-index:1; border-radius: 16px; transition: width 1s, .6s; transition-timing-function: easeOutCirc; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="wrapper"> <nav class="tabs"> <div class="selector"></div> <a href="#" class="active">WHOLESALE SUPPLY</a> <a href="#">E-LEARNING</a> <a href="#">MEDICAL COMPLIANCE</a> </nav> </div>

Stripe 网站上有类似的内容 - https://stripe.com/en-nl/sigma

Answer 1

您必须让每个字符都成为它自己的 html 元素才能更改其颜色。

没有 CSS 属性可以仅更改按钮的某些字母的颜色。

如果您关心可访问性，请小心，这将破坏屏幕阅读器。 会建议反对它。 但是，如果是临时的并且仅在动画期间发生，则可能没问题。

Answer 2

我认为没有什么非常简单的方法可以做到这一点。 快速右键单击-> Inspect 显示即使您引用的站点实际上也使用<canvas>动画来绘制整个效果（即，它不是 CSS - 它只是一张图片）。 这里有一些选项，但它们要么不完整，要么需要很长时间才能实现。

选项 1.) 获得类似效果的最快方法是添加 CSS 属性 mix-blend-mode: screen; 到您的链接并删除color: #fff; 规则。 但是，新颜色看起来会有些褪色：

.tabs a {
  position: relative;
  width: 200px;
  mix-blend-mode: screen;
}

选项 2.) 使用<canvas>像引用的站点一样创建动画，或在用户单击选项卡区域时更改的 gif 动画。 这些过程中的任何一个都需要很长时间，因为您必须创建图像或编码动画。

选项 3.) 将每个字母包裹在<span>并在 JavaScript 中使用 setTimeouts 来设置何时更改每个字母的颜色，基于动画的长度和选择器的方向（或设置 CSS 动画如果您不介意它们褪色而不是立即改变颜色，则对每一个都如此）。 这里的一个问题是整个字母会立即改变颜色，而不是一次只改变一点。

选项 4。）如果您可以完全控制导航元素的定位和大小，您可以通过编写大量 CSS 来重现效果（所以我不会在这里尝试弄清楚整个事情，但我会解释如何去做吧）。 这可能比值得做的更多的工作。

创建每个链接的副本，例如，在每个超链接中创建两个跨度，每个跨度中的文本相同。 将跨距直接放置在彼此之上，以便相应的文本重叠（即，您应该无法看到底部的文本）。

将底层跨度文本颜色设置为白色，将顶部跨度设置为#3e40db。 CSS clip-path属性是可动画的，因此您可以使用 CSS 动画来隐藏顶部跨度图层，因为选择器 div 在它上面移动（因为您可以控制元素大小、过渡时间和动画时间，所以您应该能够做到这有足够的时间投入）。 基本上， clip-path可以“剪掉”元素中显示的矩形区域，因此如果您必须重叠 div，然后使用受控动画使该矩形区域更小/更大，您可以准确控制水平矩形区域何时出现顶部被隐藏（即底部被显示）。 同样，主要问题是这将需要大量代码和很长时间来编写/实现，因为您必须完善绝对定位、计时，并考虑选择器是否在 div 上向左或向右移动. 但如果您愿意投入时间和工作，基本设置将如下所示：

@keyframes clip-animation-from-left {
    0% {
       clip-path: polygon(0px 0px, 0px 0px, 0px 300px, 0px 300px);
    }

    50% {
        clip-path: polygon(150px 0px, 300px 0px, 300px 300px, 150px 300px);
    }

    100% {
        clip-path: polygon(300px 0px, 300px 0px, 300px 300px, 300px 300px);
    }
}


/* You'll have to rewrite some JavaScript to add/remove classes determining which way the selector is coming */
.tabs a.active-from-left {
    animation-name: clip-animation-from-left;
    animation-duration: .4s;
}