1
私はカスタムドロップダウンを持っています...ほとんどすべての作業はCSSを使用して行われます。このドロップダウンはここで削除ui-dropdown-expandedクラスにMozilla FireFoxのホバーはChromeとは違って動作します
を追加することにより、オープン/クローズされ、すべての私のコード
$(document).on('click', '#ResponseFilter', function() {
$(this).find('ul').toggleClass('ui-dropdown-expanded');
});.reviews-filter.ui-dropdown {
background-attachment: scroll;
background-clip: border-box;
background-color: rgba(0, 0, 0, 0);
background-image: none;
background-origin: padding-box;
background-position-x: 0%;
background-position-y: 0%;
background-repeat-x: ;
background-repeat-y: ;
background-size: auto;
border-bottom-color: rgb(210, 210, 210);
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
border-bottom-style: solid;
border-bottom-width: 1px;
border-image-outset: 0px;
border-image-repeat: stretch;
border-image-slice: 100%;
border-image-source: none;
border-image-width: 1;
border-left-color: rgb(210, 210, 210);
border-left-style: solid;
border-left-width: 1px;
border-right-color: rgb(210, 210, 210);
border-right-style: solid;
border-right-width: 1px;
border-top-color: rgb(210, 210, 210);
border-top-left-radius: 3px;
border-top-right-radius: 3px;
border-top-style: solid;
border-top-width: 1px;
box-sizing: border-box;
color: rgb(42, 100, 150);
cursor: pointer;
display: block;
float: left;
font-family: "Proxima Nova";
font-size: 14px;
font-stretch: normal;
font-style: normal;
font-variant-caps: normal;
font-variant-ligatures: normal;
font-variant-numeric: normal;
font-weight: normal;
height: 30px;
line-height: 20px;
margin-bottom: 7px;
margin-left: 0px;
margin-right: 10px;
margin-top: 7px;
padding-bottom: 6px;
padding-left: 10px;
padding-right: 10px;
padding-top: 6px;
position: relative;
text-size-adjust: 100%;
vertical-align: baseline;
width: 200px;
word-break: keep-all;
word-wrap: break-word;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.ui-dropdown:hover {
cursor: pointer;
}
.ui-dropdown {
background: #2D72A7;
color: #fff;
padding: 6px 10px;
margin: 7px 10px 7px 0;
border: 1px solid #2D72A7;
border-radius: 3px;
position: relative;
font-size: 14px;
}
.fl {
float: left !important;
}
.fr {
padding-top: 0;
float: right !important;
}
.reviews-filter.ui-dropdown ul.ui-dropdown-expanded {
margin-top: -1px;
}
.reviews-filter.ui-dropdown ul.ui-dropdown-expanded li,
.reviews-filter.ui-dropdown ul.ui-dropdown-expanded {
background: #fff;
border: 0;
color: #2a6496;
}
.ui-dropdown:hover ul.ui-dropdown-expanded {
display: block;
background: #1a4d74;
color: #fff;
position: absolute;
left: -1px;
right: -1px;
top: 31px;
border: 1px solid #113958;
text-align: center;
box-shadow: 0 2px rgba(0, 0, 0, 0.15);
}
.ui-dropdown ul {
display: none;
z-index: 2;
}
.reviews-filter.ui-dropdown ul.ui-dropdown-expanded li {
border-left: 1px solid #D2D2D2;
border-right: 1px solid #D2D2D2;
}
.reviews-filter.ui-dropdown ul.ui-dropdown-expanded li,
.reviews-filter.ui-dropdown ul.ui-dropdown-expanded {
background: #fff;
border: 0;
color: #2a6496;
}
.ui-dropdown:hover ul.ui-dropdown-expanded li {
border-bottom: 1px solid #113958;
}
.reviews-filter.ui-dropdown ul.ui-dropdown-expanded li label {
color: #2a6496;
text-align: left;
display: block;
padding: 0 10px;
line-height: 22px;
text-transform: none;
font-size: 14px;
}
.ui-dropdown:hover ul.ui-dropdown-expanded li label {
padding-top: 10px;
padding-bottom: 10px;
color: #000;
margin: 0;
cursor: pointer;
}
.ui-dropdown ul li label {
font-weight: normal;
}<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="ResponseFilter" class="ui-dropdown fl reviews-filter" style="width: 200px;">
<div class="fl">
<span id="response-filter-selected-value">All Responses Types</span>
</div>
<div class="fr" data-filter="response">
<i class="fa fa-caret-down"></i>
<ul class="ui-dropdown-expanded">
<li>
<label for="response-filter-allresponsetypes">All Responses Types</label>
</li>
<li>
<label for="response-filter-postedresponses">Posted Responses</label>
</li>
<li>
<label for="response-filter-responserequired">Response Required</label>
</li>
</ul>
</div>
</div>ではそれがjsFiddleで（なぜ、原因がわからないことを少し異なるのですスニペットれます同じコード）
問題は - 特にFFでは、ドロップダウンボタンとドロップダウンリストの間にスペースがあるため、ドロップダウンが閉じてユーザーが失われる01画像に
ユーザーがドロップダウンリストではなく...
が原因マージン、パディングまたは何でこの問題です見ることができますpoinersがあるのですか？おかげさまで
実際には '何をしたい：hover'が正常に動作しています。 –
@MerajKhan、私の例ではいくつかのスペースがあり、それは緩やかな '：ホバー' ...私は 'margin 'や' padding'のためにできると思っていましたが、それは...非常に小さいスペースです。 ..その場所を見つけることは非常に難しいですが、それは存在します – demo
'.ui-dropdown'クラスからマージンを削除します –