Hover effect jquery not working
<p>I trying to do hover effect using following code. But its not working please help me </p>

<p>Script</p>

<pre><code>$('.sha').hover(
  function () {
    $(this).next().children('div').css('display','block');
  }, 
  function () {
    $(this).next().children('div').css('display','none');
  })
</code></pre>

<p>HTML</p>

<pre><code>&lt;div class="listing_share_cont"&gt;
    &lt;a href="#" class="sha"&gt;Share&lt;/a&gt;
    &lt;img src="images/listing_share_arrow_down.jpg" alt=" "&gt;                 
    &lt;div class="list_view_share_button_pop_up_cont"&gt;
        &lt;div class="list_view_share_button_pop_up_cont_arrow"&gt;
            &lt;img src="images/home_list_view_share_pop_arrow.png" alt=" " /&gt;
        &lt;/div&gt;
        &lt;div class="list_view_share_button_pop_up"&gt;
            &lt;!-- Some images here --&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>CSS</p>

<pre><code>.list_view_share_button_pop_up_cont { 
    float: left; left: 10px; position: absolute; top: 9px; width:285px; display:none;
}
.list_view_share_button_pop_up_cont_arrow {
    float:left; width:265px; margin:0 0 -4px 0;
}
.list_view_share_button_pop_up { 
    float:left; width:265px; background:#0474be; padding:8px 8px 4px 8px;
}
</code></pre>
