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/上找到

问题是,在谷歌浏览器上,它的工作方式就像 expeted,当鼠标悬停在 div.ui_select_list_item 上时,div 的内容会随着 div.ui_select_list_item:hover 的变化而变化。

在 Firefox 上 :hover 不起作用,知道吗?

4

2 回答 2

3

它不起作用,因为您将 a 包裹<button>在 div 周围.. 之后关闭它,<span>状态:hover将起作用..

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

于 2013-02-23T20:03:41.043 回答
0

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

显示:无;显示:内联;

我认为这将在 Firefox 中做一些更好的工作,焦点弹出菜单并内联显示它,没有阻塞。这只是我给你的一个想法,供你尝试。回复是否有效!谢谢!

于 2013-02-23T20:03:39.640 回答