Creating the hidden slide in affect on hover
<p>I have this code here which works perfect like how I want it. How would I make it so instead of sliding in when I click the icons it slides in on hover? I know I have to use the :hover but wasn't sure how exactly to do that.</p>

<p>I created a JSFiddle also the code is found below: <a href="http://jsfiddle.net/804jeg82/414/" rel="nofollow">http://jsfiddle.net/804jeg82/414/</a></p>

<p>//script</p>

<pre><code>$(document).ready(function(){
    $('.clickable').on('click' , function() {
      $(this).find('.hid').toggleClass('showme');
    });
});
</code></pre>

<p>//css</p>

<pre><code>.clickable .fa {
  cursor: pointer;
  font-size: 30px;
  color: #394461; 
}
.clickable .fa, .hid {
  float: left;
}

.hid {
  width: 0;
  overflow: hidden;
  white-space: nowrap;
  transition: all ease .35s;
  -webkit-transition: all ease .35s;
  -moz-transition: all ease .35s;
}

.showme {
  width: 150px; 
}
</code></pre>

<p>//html</p>

<pre><code>&lt;div class="clickable"&gt;&lt;i class="fa fa-phone"&gt;&lt;/i&gt;
  &lt;div class="hid"&gt;Phone Number&lt;/div&gt;
&lt;/div&gt;
&lt;div class="clickable"&gt;&lt;i class="fa fa-envelope"&gt;&lt;/i&gt;
  &lt;div class="hid"&gt;Email Here&lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p><a href="http://jsfiddle.net/804jeg82/414/" rel="nofollow">http://jsfiddle.net/804jeg82/414/</a></p>