2

アクティブ、ホバー、およびフォーカスのあるボタンを作成すると、Mac Firefox/Chrome/Safari および Window/Chrome で問題が発生します。ホバーは機能しますが、アクティブとフォーカスは機能しません。3 つすべてが 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>
4

1 に答える 1

-1

擬似クラスの特定の時系列に固執する必要があります。

  1. :link
  2. :visited
  3. :focus
  4. :hover
  5. :active

詳細については、 http://www.w3.org/TR/CSS2/selector.html#dynamic-pseudo-classesを参照してください。

于 2012-08-28T09:13:43.980 に答える