悬停时更改一个字母的字体颜色字母

当鼠标悬停发生时，我想更改一个单词中每个字母的颜色。悬停时更改一个字母的字体颜色字母

我使用转换来做到这一点，但我希望这种改变从左到右顺利发生，但我不知道为什么易插入计时功能不起作用。我想以div元素移动的方式改变我的字母颜色。

本网站中的第一个是我想： http://tympanus.net/Development/TextStylesHoverEffects/

<style> 
    p { 
     transition: all 0.5s ease-in; 
    } 

    div { 
     width: 100px; 
     height: 100px; 
     background: red; 
     position: relative; 
     -webkit-animation: mymove 5s infinite; /* Chrome, Safari, Opera */ 
     -webkit-animation-timing-function: linear; /* Chrome, Safari, Opera */ 
     animation: mymove 5s infinite; 
     animation-timing-function: linear; 
    } 

    .a:hover{ 
     color: cyan; 
    } 

    @-webkit-keyframes mymove { 
     from { 
      left: 0px; 
     } 

     to { 
      left: 200px; 
     } 
    } 

    @keyframes mymove { 
     from { 
      left: 0px; 
     } 

     to { 
      left: 200px; 
     } 
    } 
</style> 

<body> 
    <p class="a">HelloGolnaz</p> 

    <div></div> 
</body>

很抱歉，如果这是一个简单的问题，谢谢。

来源

2016-08-01 Golnaz Asadollahzadeh

数使用一些JavaScript – Li357

您可以使用两种div■一个比另一个产生这样的效果：

.default, 
 
.hover { 
 
    font-size: 18px; 
 
    font-weight: bold; 
 
    color: #787878; 
 
} 
 
.hover { 
 
    overflow: hidden; 
 
    width: 0; 
 
    position: absolute; 
 
    left: 0; 
 
    top: 0; 
 
    color: #050; 
 
    transition: width .5s ease-in-out; 
 
    white-space: nowrap; 
 
} 
 
.wrapper { 
 
    position: relative; 
 
} 
 
.wrapper:hover .hover { 
 
    width: 100%; 
 
}

<div class="wrapper"> 
 
    <div class="default">SOME WORD HERE</div> 
 
    <div class="hover">SOME WORD HERE</div> 
 
</div>

来源

2016-08-01 07:11:02 Justinas

非常感谢你，如果我想为我的导航栏项目使用此效果，我必须为类中的每个项目设置left和top属性，如悬停？ –

@GolnazAsadollahzadeh是的，但是如果所有的元素与'wrapper'有相同的偏移量，那么你只能设置一次 – Justinas

首先我想说的是，@justinas's answer是一个正确的答案，但我只是想修改自己的答案有一点可以利用CSS动画中的steps()函数而不是CSS转换，这样它看起来就像一个字母一样被填充。

注意，模拟它的步数应该是一样的，你不得不为每个字母或单独的元素字母

jsFiddle

.default, 
 
.hover { 
 
    font-size: 18px; 
 
    font-weight: bold; 
 
    color: #787878; 
 
    cursor:pointer; 
 
} 
 
.hover { 
 
    overflow: hidden; 
 
    width: 0; 
 
    position: absolute; 
 
    left: 0; 
 
    top: 0; 
 
    color: navy; 
 
    white-space: nowrap; 
 
} 
 
.wrapper { 
 
    position: relative; 
 
    display: inline-block; 
 
} 
 
.wrapper:hover .hover { 
 
    width: 100%; 
 
    animation: stagger 2s steps(14); 
 
} 
 
@keyframes stagger { 
 
    from {width: 0;} 
 
    to {width: 100%;} 
 
}

<div class="wrapper"> 
 
    <div class="default">SOME WORD HERE</div> 
 
    <div class="hover">SOME WORD HERE</div> 
 
</div>

来源

2016-08-01 08:54:32

非常感谢你，太棒了 –

@GolnazAsadollahzadeh，不客气，但是我只是把它发布为一个修改过的版本Justinas的答案，我在帖子中说过的，我不想让这个答案成为被选中的答案，那么请您检查justinas的回答是否正确。 –

再次感谢@米创意，有没有什么方法可以改变颜色的改变方向？ –

悬停时更改一个字母的字体颜色字母

回答

相关问题