0

Firefox に少し問題があります。これは html です。

<html>
<button name="five" data-type="select" class="ui_button ui_button_normal">
<span>Pasta</span>
<div class="ui_button ui_button_normal ui_select_list">
    <div class="ui_select_list_item" name="Pasta">Pasta</div>
    <div class="ui_select_list_item" name="Carne">Carne</div>
    <div class="ui_select_list_item" name="Verdura">Verdura</div>
    <div class="ui_select_list_item" name="Pesce">Pesce</div>
    <div class="ui_select_list_item" name="Dolce">Dolce</div>
    <div class="ui_select_list_item" name="Frutta">Frutta</div>
    <div class="ui_select_list_item" name="Caffè">Caffè</div>
</div>
</button>
</html>

そしてこれがCSSです

.ui_select_list 
{
margin: 0px !important;
height: auto !important;
padding: 10px;
}
.ui_select_list_item 
{
border: 1px solid transparent;
}
.ui_select_list_item:hover 
{
border: 1px solid transparent;
background-color: rgba(0, 185, 0, 0.3);
box-shadow: 0 0 2px 1px #000000;
border-radius: 10px;
}
.ui_button 
{
background-color: rgba(140, 140, 140, 0.5);
border: 0 solid transparent;
border-radius: 10px 10px 10px 10px;
color: #FFFF00;
font-family: verdana, sans-serif;
font-size: 15px;
height: 32px;
line-height: 30px;
margin: 5px;
position: relative;
text-align: center;
width: 160px;
}
.ui_button_normal 
{
box-shadow: 0 0 1px 4px rgba(0, 0, 0, 0.5);
}
.ui_button_normal:hover 
{
background-color: rgba(180, 180, 180, 0.5);
box-shadow: 0 0 2px 5px rgba(0, 0, 0, 0.8);
}

http://jsfiddle.net/Mak73/3YkSe/で見つけることができます

問題は、Google Chrome では、マウスが div.ui_select_list_item の上にあるときに、div の内容が div.ui_select_list_item:hover で変更されると、Expeted のように動作することです。

Firefox では :hover が機能しません。

4

2 に答える 2

3

<button>div の周りにa をラップしているため、機能していません..後に閉じて<span>、:hover状態が機能します..

Jsfiddle: http://jsfiddle.net/3YkSe/2/

于 2013-02-23T20:03:41.043 に答える
0

次の要素オプションを適用することをお勧めします。

表示: なし; 表示: インライン;

これにより、Firefox での作業が改善されると思います。フォーカス時にメニューをポップして、ブロックせずにインラインで表示します。これは私があなたに試してもらいたいアイデアです。うまくいくかどうかを返信してください！ありがとう！

于 2013-02-23T20:03:39.640 に答える