CODEWITHSUNDEEP
jquerycss
LondonGuy
LondonGuy

Reputation: 11098

Why does firefox keep highlighting my drop down menu links? Possibly CSS/JQuery related

Every time I click the div that activates/drops down my drop down menu the links are highlighted:

enter image description here

Quite annoying. It's either a CSS or JQuery issue.. I have a .postHolder class that holds each post that is posted on the page. Now if I click any where on the screen to close the menu then click on the menu open button again the issue is gone. If I go to the next post and try the issue is there until I click off then click on again.

If I refresh the browser the issue is back, starting on the first post. This is quite confusing as it's not happening in any of my other browsers.

Here is the CSS for the menu:

.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;;
                }

        }

}

The JQuery incase this is JQuery related:

    $(".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>

Kind regards

Upvotes: 2

Views: 709

Answers (3)

LondonGuy
LondonGuy

Reputation: 11098

This fixed my issue for now. Well masked it.

span::-moz-selection {
    background: none; /* Firefox */
}

Upvotes: 1

Jake Toolson
Jake Toolson

Reputation: 480

Your css is setting a background color on hover:

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

The 

a span {
color:gray;
}

overrides the color you set for :hover and sets it to gray.

Upvotes: 2

idrumgood
idrumgood

Reputation: 4924

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

Assuming that the links in your dropdown list are also in <li> this style is being inherited.

Upvotes: 2

Related Questions