使用CSS懸停時更改/微移文本位置

Question

我正在製作一個看起來像這樣的菜單http://exclusivelyhistailoring.com/請注意，當鏈接懸停時，文本向右移動並更改顏色。

Unhovered國家

徘徊狀態

這是我到目前爲止有：

.text-glow { 
    font-size:4em; 
    color: #FFFFFF; 
    font-family:Arial!important; 
    -webkit-stroke-width: 6.3px; 
    -webkit-stroke-color: #FFFFFF; 
    -webkit-fill-color: #FFFFFF; 
    text-shadow: 1px 0px 20px white; 
    -webkit-transition: width 0.9s; 
    /*Safari & Chrome*/ 
    transition: width 0.9s; 
    -moz-transition: width 0.9s; 
    /* Firefox 4 */ 
    -o-transition: width 0.9s; 
    /* Opera */ 
} 

.text-glow:hover, .text-glow:focus .text-glow:active { 
    color: transparent; 
    text-shadow: 0 0 5px #000; 
} 

任何想法？

Answer 1

這是一個flash文件，所以要創建一個類似於使用CSS的東西，你需要的是text-indent財產或padding-left，無論你是罰款..

我做了從無到有下面的演示。 。

Demo

html, body { 
    height: 100%; 
    background: #FF9000; 
} 

ul { 
    margin: 20px; 
    font-family: Arial; 
    font-size: 15px; 
    font-weight: bold; 
} 

ul li { 
    margin-bottom: 5px; 
    text-shadow: 0 0 10px #fff; 
    color #000; 
    -moz-transition: all .5s; 
    -webkit-transition: all .5s; 
    transition: all .5s; 
} 

ul li:hover { 
    color: #fff; 
    text-indent: 15px; 
} 

a { 
    color: inherit; 
    text-decoration: none; 
}