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

Question

仅当 选择器 与文本重叠且找不到解决方案时，我才尝试将字体颜色更改为白色。

想要的行为如下：

1. Change the font color to white only when the selector is 重叠。
2. 将活动标签的字体大小增加到 18 像素
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

我认为没有很好的简单方法可以做到这一点。快速右键单击->检查显示，即使您引用的站点实际上也使用<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;
}