0

以下にホバーオン効果を与えるために使用される次のJavaScriptコードが配置されています

  • 鬼ごっこ。ユーザーがliアイテムにカーソルを合わせない限り、非表示にしたいクラスshow_on_hoverを持つ2つのスパンがあります。

    ただし、以下の JavaScript コードでも、ホバーすると不透明度を 1 に変更できません。私を助けてください。以下のコードは間違っていますか?

    1 つの注意点として、以下の li コードは 1 つのダミーの 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

    を使用しないでください。 hovermouseenterを使用してください。

    于 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 に答える