Firefoxがドロップダウンメニューのリンクを強調表示し続けているのはなぜですか？非常に迷惑</p> <p><img src="https://i.stack.imgur.com/qxGbA.png" alt="enter image description here"></p> <p>：おそらくCSS/jQueryの

Question

たびに私はアクティブに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> 

種類が

Answer 1

これは私の問題を修正しました。まあそれをマスク。

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

Answer 2

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

について

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

Answer 3

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

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

a span { 
color:gray; 
} 

あなたは:hoverに設定した色をオーバーライドし、グレーにそれを設定します。