Question

我对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。

在Firefox上：悬停不起作用，任何想法？

Answer 1

它不起作用，因为你在div周围包裹<button> ..在<span>之后关闭它并且:hover状态将起作用..

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

Answer 2

我建议您尝试应用以下元素选项：

display：none; 显示：内联;

我认为这将在Firefox中做一些更好的工作，重点是pop 菜单并显示内联，无阻塞。这只是我的一个想法得到你试试。如果有效则回复！谢谢！

类：悬停在Firefox上不起作用

2 个答案: