自定义过渡彩色菜单

Question

我有这个链接菜单结构，动画高亮颜色onmouseover ，我有兴趣找到一种方法来改变文本颜色保持相同的过渡效果而不是像我们在这个例子中的高亮下划线（浅灰色文本在onmouseover变成白色） 。

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

如果有人可以给我的不仅仅是一个downvote，将非常感激。 谢谢

 <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>