当我创建具有事件、悬停和焦点的按钮时,我在使用 Mac Firefox/Chrome/Safari 和 Window/Chrome 时遇到问题。悬停有效,但事件和焦点无效。他们三个都只能在 Window/Firefox 上完美运行。 我用css来做。有什么建议吗?
这是我的 CSS:
.navList button:hover,
.navList button:active,
.navList button:focus{ /* Changed */
border-color: black;
border-style: solid;
background: rgb(73,155,234); /* Old browsers */
background: -moz-linear-gradient(top, rgb(73,155,234) 0%, rgb(32,124,229) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(73,155,234)), color- stop(100%,rgb(32,124,229))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgb(73,155,234) 0%,rgb(32,124,229) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgb(73,155,234) 0%,rgb(32,124,229) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgb(73,155,234) 0%,rgb(32,124,229) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgb(73,155,234) 0%,rgb(32,124,229) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#499bea', endColorstr='#207ce5',GradientType=0 ); /* IE6-9 */
}
这是 html:
<ul id="List" class="navList">
<button id="eButton" class="moduleButton">Employees</button>
<button id="iButton" class="moduleButton">Inventory</button>
</ul>
最佳答案
你必须坚持伪类的特定时间顺序:
:链接
:访问过
:focus
:悬停
:active
参见 http://www.w3.org/TR/CSS2/selector.html#dynamic-pseudo-classes了解更多详情。
关于javascript - 按钮处于事件状态,焦点在 Mac FireFox 上不起作用?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12079726/