I've set up a collection of glyphicons that reveal expanding text when hovered over.
The problem I'm encountering is that if the text happens to be lengthy, it flashes over the container of the glyphicon before the CSS transition finishes.
You can see an example in this fiddle (focus on the second box when hovering).
I've been experimenting with different transitions and attempting to make the text appear only after the transition is complete.
Here's my 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>
And here's the CSS code:
.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;
}