Show on hover effect for certain elements in jquery
<p>I have the following javascript code in place which is used to give hover on effect to the below <li> tag. I have 2 span with class show_on_hover which i wantr invisible unless the user hovers over the li item.</p>

<p>However even the below javascript code is not able to change the opacity to 1 when I hover over it. please help me. whts wrong with the below code?</p>

<p>One point to note is that the below li code is just one dummy li. There are similar 35 li's on the page and hence when i hover on that particular li tag, only that li's show_on_hover effect should show.</p>

<p>javascript</p>

<pre><code>     $(".altbgcolor").live({
                mouseenter: function() {
                    var el= $(this);
                    el.addClass('altbgcolor-active');
                    el.data('hover', setTimeout(function()
                        {
                            if (el.hasClass('altbgcolor-active'))
                            {
                                el.find(".sharedp").slideDown('normal');
                                     el.contents().find(".show_on_hover").css("opacity","1");

                            }
                        }, 1500)
                    );      
                },
                mouseleave: function () {
                    var el= $(this);
                    clearTimeout(el.data('hover'));
                    el.removeClass('altbgcolor-active')
                        .find(".sharedp")
                        .slideUp('normal');
                }
            });
</code></pre>

<p>li code</p>

<pre><code>  &lt;li class="altbgcolor" id=1436&gt;
                    &lt;div&gt;   &lt;a href=http://mashup2.sunnydsouza.com/mobile/1436/ target="_blank" rel="nofollow"&gt;
                        &lt;div class="newsthumb" center center no-repeat;"&gt;&lt;img src="/images/mobile/thumb_1436_100X100.jpg"  /&gt;&lt;/div&gt;
                        &lt;/a&gt;


                        &lt;div class="newstext" style="margin:0px;"&gt;

                        &lt;a href=http://mashup2.sunnydsouza.com/mobile/1436/full/ target=_blank style="text-decoration:none; "&gt;&lt;h1 style="color:#081C28;"&gt;&lt;img width="11" height="9" src="/content/icon_topic_newest.gif"&gt; Twitter Reviews ‘The Hunger Games’ in 140 Characters or Less &amp;nbsp;&lt;/h1&gt;&lt;/a&gt;

                            &lt;div style="font-size: 0.4em; color:#666666;"&gt;  



                                            &lt;span style="text-decoration:none; color:none; "&gt;&lt;i&gt; via &lt;a href="http://mashup2.sunnydsouza.com/user/1/" style="text-decoration: none;color:#105289 ;" onmouseover="this.style.textDecoration = 'underline'" onmouseout="this.style.textDecoration = 'none'"&gt;demo1&lt;/a&gt;&lt;/i&gt;&lt;/span&gt;                          
                                            &lt;i&gt;in &lt;a href="http://mashup2.sunnydsouza.com/mobile/" style="text-decoration: none;color:red ;" onmouseover="this.style.textDecoration = 'none'" onmouseout="this.style.textDecoration = 'none'"&gt;Mobile&lt;/a&gt;&lt;/i&gt;                            
                                            &lt;span style="text-decoration:none; color:none; "&gt;

                                            &lt;a class="example7" href="comments_3.php?id=1436" style="text-decoration:none; color:#666666; "&gt;&lt;img src="content/comment/comments.png" width=18 height=18&gt;&lt;i&gt;No comments&lt;/i&gt;&lt;/a&gt;&lt;/span&gt;

                                            &lt;span class="show_on_hover" style="text-decoration:none; color:none; margin:5px; opacity:0.001;"&gt;&lt;img src="content/styles/images/view_count_icon.png" &gt;  38 views&lt;/span&gt;    
                                            &lt;span class="show_on_hover" style="text-decoration:none; color:none; margin:5px;opacity:0.001;"&gt;&lt;img src="content/styles/images/rating_count_icon.png" &gt;  6 votes&lt;/span&gt;    
                                            &lt;br&gt;&lt;br&gt;
                                            &lt;div class="ratings"&gt;

                                                &lt;div class="rating-L"&gt;

                                                    &lt;form class="ratedStars" id="rat1436" action="" method="post"&gt;



                                                        &lt;select name="rate"&gt;&lt;option value="1436_1"&gt;Not so great&lt;/option&gt;&lt;option value="1436_2"&gt;Quite good&lt;/option&gt;&lt;option value="1436_3"&gt;Good&lt;/option&gt;&lt;option value="1436_4" selected  &gt;Great!&lt;/option&gt;&lt;option value="1436_5"&gt;Excellent!&lt;/option&gt;&lt;/select&gt;

                                                        &lt;input type="submit" value="Rate it!" /&gt;

                                                    &lt;/form&gt;

                                                &lt;/div&gt;
                                            &lt;/div&gt;  &lt;br&gt;

                            &lt;/div&gt;



                        &lt;/div&gt;
                     &lt;div class="clear"&gt;&lt;/div&gt;
                     &lt;/div&gt;

                     &lt;div class="sharedp"&gt;
                         &lt;div style="font-size: 0.7em; color:#666666;"&gt; 
                         &lt;span style="text-decoration:none; color:none; "&gt; Posted By: &lt;a href="http://mashup2.sunnydsouza.com/user/1/" style="text-decoration: none;color:#105289 ;" onmouseover="this.style.textDecoration = 'underline'" onmouseout="this.style.textDecoration = 'none'"&gt;demo1&lt;/a&gt;&lt;/span&gt;                         
                         |   &lt;span style="text-decoration:none; color:none; "&gt; Date: &lt;i&gt;March 24, 2012, 1:03 pm&lt;/i&gt;&lt;/span&gt; &lt;t /&gt;
                        &lt;/div&gt;
     &lt;/li&gt;
</code></pre>
