Question

我有this链接菜单结构，具有动画的突出显示颜色onmouseover，而且我想找到一种方法来更改文本颜色并保持相同的过渡效果，而不是像{ {3}}示例（浅灰色文本在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（以获取信息）

要从一种颜色切换到另一种颜色，可以通过背景位置和过渡来移动背景尺寸的渐变图像：

ObjectMapper objectMapper = new ObjectMapper();
    final String output = "[{\"table\": \"A\", \"no\": \"064/A/NBP/2013\",\"effectiveDate\": \"2013-04-02\",\"rates\": [{\"currency\": \"bat (Tajlandia)\",\"code\": \"THB\",\"mid\": 0.1108},{\"currency\": \"dolar amerykański\",\"code\": \"USD\",\"mid\": 3.2552},{\"currency\": \"dolar australijski\",\"code\": \"AUD\",\"mid\": 3.4048}]}]";
    objectMapper.setVisibility(PropertyAccessor.FIELD, JsonAutoDetect.Visibility.ANY);
    List<CurrencyModel> currencyModelList = objectMapper.readValue(output, new TypeReference<List<CurrencyModel.Currencies>>(){});
    System.out.println(currencyModelList);

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

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>

自定义过渡色菜单

2 个答案: