自定义过渡色菜单

Question

我有这个链接菜单结构，具有动画高亮颜色onmouseover，我很想找到一种方法来更改文本颜色，保持相同的过渡效果，而不是像本例中那样高亮下划线(浅灰色文本在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>

Answer 2

这可以通过将另一个div放在主div的顶部，然后对其应用转换来实现

.main,
.cover {
color: red;
}
.wrapper {
position: relative;
}
.wrapper:hover .cover {
width: 100%;
}
.cover {
overflow: hidden;
width: 0;
position: absolute;
left: 0;
top: 0;
color: blue;
transition: width .5s ease-in-out;
white-space: nowrap;
}

<div class="wrapper">
<div class="main">This is a text</div>
<div class="cover">This is a text</div>
</div>