類：懸停不會在Firefox

工作，我有Firefox的一個小問題，這是HTML類：懸停不會在Firefox

<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而改變。

在Firefox上：懸停不起作用，有什麼想法？

來源

2013-02-23 Mak73