Question

I have the following javascript code in place which is used to give hover on effect to the below

tag. I have 2 span with class show_on_hover which i wantr invisible unless the user hovers over the li item.

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?

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.

javascript

     $(".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');
                }
            });

li code

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


                        <div class="newstext" style="margin:0px;">

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

                            <div style="font-size: 0.4em; color:#666666;">  



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

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

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

                                                <div class="rating-L">

                                                    <form class="ratedStars" id="rat1436" action="" method="post">



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

                                                        <input type="submit" value="Rate it!" />

                                                    </form>

                                                </div>
                                            </div>  <br>

                            </div>



                        </div>
                     <div class="clear"></div>
                     </div>

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

Answer 1

Was able to solve this by using id to every instance of this span tag. fetched the current id by using $(this).attr(‘id’) and then used that to make the counts visible/invisible by $(‘feed_count_’+id).css(‘opacity’,1)