CSS hover slide outがテキストを早く点滅する

Question

グリフコンのリストを作成しました。各グリフコンの上にマウスを置くと、展開するテキストが表示されます。

私が直面する問題は、テキストが長いと、CSSトランジションが起こる前にグリフコンのコンテナに点滅することです。

Here is a fiddle example (notice the second box on hover).

私はトランジションで遊んと移行が完了した後に表示されるテキストを取得しようとしています。

マイHTML：

<div class="myContainer"> 
    <div id="myNav"> 
    <ul class="subMenu"> 
     <li class="listItem"><a href="#">List Item 1</a></li> 
     <li class="listItem"><a href="#">List Item 2 with long text</a></li> 
    </ul> 
    </div> 
</div> 

マイCSS：

.subMenu .listItem { 
    clear:both; 
    list-style: none; 
    height:15px; 
    width: 15px; 
    color: transparent; 
    cursor: pointer; 
    float: right; 
    background: #ededed url(https://static.tumblr.com/ftv85bp/MIXmud4tx/search-icon.png) no-repeat 10px center; 
    border: solid 1px #ccc; 
    padding: 9px 12px 9px 10px; 
    -webkit-transition: all .5s; 
    -moz-transition: all .5s; 
    transition: all .5s; 
} 


.subMenu .listItem:hover { 
    width: 100%; 
    color: #000; 
    cursor: auto; 
    background: #fff 
} 


.subMenu .listItem a { 
    color: transparent; 
} 

.subMenu .listItem:hover a{ 
    color: #000; 
} 

Answer 1

あなたは.listItemでoverflow:hidden;を入れて、リンク上でwhite-space:nowrap;を使用して壊れていない行を強制することができます。

new code fiddle

最終的なコード：

#myNav { 
    width: 50%; 
} 

.subMenu .listItem { 
    clear:both; 
    list-style: none; 
    height:15px; 
    width: 15px; 
    color: transparent; 
    cursor: pointer; 
    float: right; 
    background: #ededed url(https://static.tumblr.com/ftv85bp/MIXmud4tx/search-icon.png) no-repeat 10px center; 
    border: solid 1px #ccc; 
    padding: 9px 12px 9px 10px; 
    -webkit-transition: all .5s; 
    -moz-transition: all .5s; 
    transition: all .5s; 
    overflow: hidden; 
} 


.subMenu .listItem:hover { 
    width: 100%; 
    color: #000; 
    cursor: auto; 
    background: #fff 
} 


.subMenu .listItem a { 
    color: transparent; 
    white-space:nowrap; 
} 

.subMenu .listItem:hover a{ 
    color: #000; 
} 

は、このことができます願っています。 = D