0

我有以下 javascript 代码,用于使悬停在下面生效

  • 标签。我有 2 个类 show_on_hover 的跨度,除非用户将鼠标悬停在 li 项目上,否则我希望它是不可见的。

    然而,当我将鼠标悬停在它上面时,即使是下面的 javascript 代码也无法将不透明度更改为 1。请帮我。下面的代码有什么问题?

    需要注意的一点是,下面的 li 代码只是一个虚拟 li。页面上有类似的 35 li,因此当我将鼠标悬停在那个特定的 li 标记上时,只会显示 li 的 show_on_hover 效果。

    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 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>
    
  • 4

    2 回答 2

    0

    不要使用mouseenter,使用悬停

    于 2012-04-29T12:38:29.740 回答
    0

    能够通过对这个 span 标签的每个实例使用 id 来解决这个问题。通过使用 $(this).attr('id') 获取当前 id,然后使用它使计数可见/不可见 $('feed_count_'+id).css('opacity',1)

    于 2012-05-01T15:42:06.387 回答