懸停時更改一個字母的字體顏色字母

當鼠標懸停發生時，我想更改一個單詞中每個字母的顏色。懸停時更改一個字母的字體顏色字母

我使用轉換來做到這一點，但我希望這種改變從左到右順利發生，但我不知道爲什麼易插入計時功能不起作用。我想以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的回答是否正確。 –

再次感謝@米創意，有沒有什麼方法可以改變顏色的改變方向？ –

懸停時更改一個字母的字體顏色字母

回答

相關問題