javascript - 自定义过渡彩色菜单

Question

我有this链接菜单结构，带有动画突出显示颜色 onmouseover，我有兴趣找到一种方法来更改文本颜色，保持相同的过渡效果，而不是像我们在 this 中那样突出显示下划线。示例(浅灰色文本在 onmouseover 处变为白色)。

老实说，我不知道如何处理这个问题，我只确定了 html 中的菜单序列和 css 中与颜色和过渡相关的一些元素 -不值得一提，但看起来 javascript 代码(？)背后可能有很多东西。

如果有人可以给我更多的反对票，将不胜感激。谢谢

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="edge-ils-content-holder">
                <div class="edge-ils-content-table">
                    <div class="edge-ils-content-table-cell">
                                                                                    
                            <div class="edge-ils-item-content" style="font-size: 85px;line-height: 1.77em;font-weight: 800;text-align: left">
                                <a class="edge-ils-item-link" itemprop="url" target="_self" href="http://www.neuegrid.com/interactive-links" style="color:#0a0a0a;line-height: 1.77em">
                                    Link 1
                                                                                                                    <span class="edge-ils-item-link-shadow edge-box-shadow edge-start" style="background-color:rgba(218,229,0,0.92); height:50px;"></span>
                                        <span class="edge-ils-item-link-shadow edge-box-shadow edge-end" style="background-color:rgba(218,229,0,0.92); height:50px;"></span>
                                                                    </a>
                            </div>
                                                                                                                
                            <div class="edge-ils-item-content" style="font-size: 85px;line-height: 1.77em;font-weight: 800;text-align: left">
                                <a class="edge-ils-item-link" itemprop="url" target="_self" href="http://www.neuegrid.com/interactive-links" style="color:#0a0a0a;line-height: 1.77em">
                                    Link 2
                                                                                                                    <span class="edge-ils-item-link-shadow edge-box-shadow edge-start" style="background-color:rgba(218,229,0,0.92); height:50px;"></span>
                                        <span class="edge-ils-item-link-shadow edge-box-shadow edge-end" style="background-color:rgba(218,229,0,0.92); height:50px;"></span>
                                                                    </a>
                            </div>
                                                                                                                
                            <div class="edge-ils-item-content" style="font-size: 85px;line-height: 1.77em;font-weight: 800;text-align: left">
                                <a class="edge-ils-item-link" itemprop="url" target="_self" href="http://www.neuegrid.com/interactive-links" style="color:#0a0a0a;line-height: 1.77em">
                                    Link 3
                                                                                                                    <span class="edge-ils-item-link-shadow edge-box-shadow edge-start" style="background-color:rgba(218,229,0,0.92); height:50px;"></span>
                                        <span class="edge-ils-item-link-shadow edge-box-shadow edge-end" style="background-color:rgba(218,229,0,0.92); height:50px;"></span>
                                                                    </a>
                            </div>
                                                                                                                
                            <div class="edge-ils-item-content" style="font-size: 85px;line-height: 1.77em;font-weight: 800;text-align: left">
                                <a class="edge-ils-item-link" itemprop="url" target="_self" href="http://www.neuegrid.com/interactive-links" style="color:#0a0a0a;line-height: 1.77em">
                                    Link 4
                                                                                                                    <span class="edge-ils-item-link-shadow edge-box-shadow edge-start" style="background-color:rgba(218,229,0,0.92); height:50px;"></span>
                                        <span class="edge-ils-item-link-shadow edge-box-shadow edge-end" style="background-color:rgba(218,229,0,0.92); height:50px;"></span>
                                                                    </a>
                            </div>
                                                                                                                
                            <div class="edge-ils-item-content" style="font-size: 85px;line-height: 1.77em;font-weight: 800;text-align: left">
                                <a class="edge-ils-item-link" itemprop="url" target="_self" href="http://www.neuegrid.com/interactive-links" style="color:#0a0a0a;line-height: 1.77em">
                                    Link 5
                                                                                                                    <span class="edge-ils-item-link-shadow edge-box-shadow edge-start" style="background-color:rgba(218,229,0,0.92); height:50px;"></span>
                                        <span class="edge-ils-item-link-shadow edge-box-shadow edge-end" style="background-color:rgba(218,229,0,0.92); height:50px;"></span>
                                                                    </a>
                            </div>
                                                                                                                
                            <div class="edge-ils-item-content" style="font-size: 85px;line-height: 1.77em;font-weight: 800;text-align: left">
                                <a class="edge-ils-item-link" itemprop="url" target="_self" href="http://www.neuegrid.com/interactive-links" style="color:#0a0a0a;line-height: 1.77em">
                                    Link 6
                                                                                                                    <span class="edge-ils-item-link-shadow edge-box-shadow edge-start" style="background-color:rgba(218,229,0,0.92); height:50px;"></span>
                                        <span class="edge-ils-item-link-shadow edge-box-shadow edge-end" style="background-color:rgba(218,229,0,0.92); height:50px;"></span>
                                                                    </a>
                            </div>
                                                                                                                
                            <div class="edge-ils-item-content" style="font-size: 85px;line-height: 1.77em;font-weight: 800;text-align: left">
                                <a class="edge-ils-item-link" itemprop="url" target="_self" href="http://www.neuegrid.com/interactive-links" style="color:#0a0a0a;line-height: 1.77em">
                                    Link 7
                                                                                                                    <span class="edge-ils-item-link-shadow edge-box-shadow edge-start" style="background-color:rgba(218,229,0,0.92); height:50px;"></span>
                                        <span class="edge-ils-item-link-shadow edge-box-shadow edge-end" style="background-color:rgba(218,229,0,0.92); height:50px;"></span>
                                                                    </a>
                            </div>
                                                                                                                
                            <div class="edge-ils-item-content" style="font-size: 85px;line-height: 1.77em;font-weight: 800;text-align: left">
                                <a class="edge-ils-item-link" itemprop="url" target="_self" href="http://www.neuegrid.com/interactive-links" style="color:#0a0a0a;line-height: 1.77em">
                                    Link 8
                                                                                                                    <span class="edge-ils-item-link-shadow edge-box-shadow edge-start" style="background-color:rgba(218,229,0,0.92); height:50px;"></span>
                                        <span class="edge-ils-item-link-shadow edge-box-shadow edge-end" style="background-color:rgba(218,229,0,0.92); height:50px;"></span>
                                                                    </a>
                            </div>
                                                                                                                
                            <div class="edge-ils-item-content" style="font-size: 85px;line-height: 1.77em;font-weight: 800;text-align: left">
                                <a class="edge-ils-item-link" itemprop="url" target="_self" href="http://www.neuegrid.com/interactive-links" style="color:#0a0a0a;line-height: 1.77em">
                                    Link 9
                                                                                                                    <span class="edge-ils-item-link-shadow edge-box-shadow edge-start" style="background-color:rgba(218,229,0,0.92); height:50px;"></span>
                                        <span class="edge-ils-item-link-shadow edge-box-shadow edge-end" style="background-color:rgba(218,229,0,0.92); height:50px;"></span>
                                                                    </a>
                            </div>

Answer 1

您也可以看看 background-clip或 mix-blend-mode (信息)

要从一种颜色切换到另一种颜色，可以通过背景位置和过渡移动渐变图像、背景大小:

body {
  line-height: 5vw;
  padding: 1vw;
  background: linear-gradient(to top left, gray, yellow, purple);/* see effects of method*/
}

a:after {
  content: ' mix-blend-mode + pseudo';
  font-variant: small-caps;
  font-size: 0.75em;
  vertical-align: 0.75em
}

a:nth-child(even):after {
  content: ' background-clip';
}

a {
  font-size: 2vw;
  position: relative;
  background: white;
  padding: 0.25em;
  border: solid black;
  margin: 1em;
  color: gray;
}

a:nth-child(odd):before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(to left, lime 50%, red 50%) 100% 0% no-repeat;
  background-size: 200% 100%;
  mix-blend-mode: overlay;
  /* not the best method */
  transition: 1s;
}

a:nth-child(even) {
  color: transparent;
  background: linear-gradient(to left, lime 50%, red 50%) 100% 0% no-repeat;
  background-size: 200% 100%;
  background-clip: text;
  transition: 1s;
}


/* move bg */

a:hover,
a:hover:before {
  background-position: 0% 0%
}

<a href>link link link</a>
<a href>link link link</a>
<a href>link link</a>
<a href>break lines link link link link link link link link link link link link link link link link link link link link link link link link link link link link link link link link link link link link </a>
<a href>link link link</a>
<a href>link link link</a>
<a href>link link</a>
<a href>link link link link</a>