2

ドロップダウンメニューをアクティブ化/ドロップダウンするdivをクリックするたびに、リンクが強調表示されます。

ここに画像の説明を入力してください

かなり迷惑です。これはCSSまたはJQueryの問題です。ページに投稿された各投稿を保持する.postHolderクラスがあります。画面上の任意の場所をクリックしてメニューを閉じ、メニューを開くボタンをもう一度クリックすると、問題は解決しました。次の投稿に移動して、問題が発生するのを試してみる場合は、クリックしてからもう一度クリックしてください。

ブラウザを更新すると、最初の投稿から問題が再発します。これは、他のどのブラウザでも発生していないため、非常に混乱します。

メニューのCSSは次のとおりです。

.postMenu {
    position:absolute;
    display:none;
    padding-bottom:20px;
    background-color:white !important;
    border:1px solid $main-background-color;
    height:163px;
    width:170px;
    top:18px;
    right:2px;
    -webkit-box-shadow: 0 10px 6px -6px #777;
    -moz-box-shadow: 0 10px 6px -6px #777;
    box-shadow: 0 10px 6px -6px #777;
    color:gray;
    z-index:3000;

        li {

        font-size:12px;
        height:33px;
        background-color:white !important;

            a span {
                float:left;
                width:160px;
                height:33px;
                line-height:33px;
                padding-left:10px;
                color:gray;

                  &:hover {
                    background-color:#4D90FE !important;
                    color:white;
                    //  #DD4B39,#D14836
                    }
            }

            &:hover {
            background-color:#4D90FE;
            color:white;

            }
        }

        .deletePost {
            //position:relative;
            padding-top:0px !important;
            padding-left:0px !important;
            height:39px;
            width:170px;
            text-align:center;
            padding-bottom:7px;
            border-bottom:1px solid #d9d9d9;

                a {

                    span {
                    float:left;
                    padding-left:0px !important;                            
                        height:46px !important;
                        width:170px !important;
                        line-height:46px;
                    }
                }

                a span:hover {
                    background-color:#DD4B39 !important;
                    color:white;
                //  #DD4B39,#D14836
                }
        }

        .reportAbuse {
            border-top:1px solid #d9d9d9;

                a span:hover {
                    background-color:gray !important;;
                }

        }

}

これがJQuery関連の場合のJQuery：

    $(".microposts").on("click", ".micropostOptions", function() {
        var postMenu = $(this).find('.postMenu');

        if(postMenu.is(':hidden') ){
            $('.postMenu').hide();
            $('.micropostOptions').removeClass("postMenuHoverState");
            postMenu.show();
            $(this).hide().addClass('postMenuHoverState').show(60);

        }else{
            postMenu.hide();
            $(this).removeClass("postMenuHoverState");
        }

    $(document.body).click(function(e) {
        var clickedElement = $(e.target);
        if(clickedElement.is('.micropostOptions:visible')) {
            return;
        }
        $('.postMenu').hide();
        $('.micropostOptions').removeClass("postMenuHoverState");
    });

});

HTML：

   <nav class="micropostOptions">
         <ul class="postMenu">
           <li class="deletePost"><%= link_to content_tag(:span, "Delete post"), m, :method => :delete, :confirm => "Are you sure?", :title => m.content, :class => "message_delete" %>
           </li>
           <li class="disableCommenting"><%= link_to content_tag(:span, "Pause commenting"), "2" %></li>
           <li class="blockCommenter"><%= link_to content_tag(:span, "Block commenter"), "3" %></li>
           <li class="openInNewWindow"><%= link_to content_tag(:span, "Open in new window"), "4" %></li>
           <li class="reportAbuse"><%= link_to content_tag(:span, "Report abuse"), "5" %></li>
         </ul>  
       </nav>

敬具

4

3 に答える 3

2 
&:hover {
    background-color:#4D90FE;

<li>ドロップダウンリストのリンクもこのスタイルであると仮定すると、継承されます。

于 2012-04-10T18:11:30.630 に答える
2

あなたのCSSはホバーに背景色を設定しています：

    &:hover {
    background-color:#4D90FE;
    color:white;
    }

The

a span {
color:gray;
}

設定した色を上書きし:hoverて灰色に設定します。

于 2012-04-10T18:12:59.840 に答える
1

これで今のところ私の問題は修正されました。よくマスクされています。

span::-moz-selection {
    background: none; /* Firefox */
}
于 2012-04-10T19:06:47.240 に答える