11

ホバーが機能しなくなったことを除いて、機能していて正常に見えるカスタムボタンがいくつかあります（ホバーで色が変わるはずです。最初にコーディングしたときに機能しましたが、ある時点で停止しました。いつ停止したのか、なぜ停止したのかわかりません。はchrome、firefox、IE8のいずれでも動作していません。明らかに私は何かを台無しにしましたが、まだ見つけていません。私は探し続け、調査を続けますが、何かアイデアがあれば、大いに感謝します。

html：

<input class="left-menu-button" type="button" value="Search" />
<input class="left-menu-button" type="button" value="View Detail" />

css：

.left-menu-button
{
    width: 200px;
    height: 60px;
    color: #fff;
    background-color: #631127;
    border: none;
    margin: 20px 40px 0 0;
    font-size: 1.2em;
    float: right;
}

.left-menu-button:hover
 {
       background-color: #A3143A !important;
 }
4

5 に答える 5

15

1）GoogleChromeでページを開きます;
2）「開発者ツール」のF12を押して開きます。
3）問題のある入力を選択します。
4）右側には、適用されたスタイルがあります。
5） [スタイル]タブで、点線の長方形の内側にある2番目のアイコンをクリックします。
6）「：hover」を選択します。これにより、入力がホバーされているときに何が起こっているかを確認し、問題を見つけることができます。

于 2013-02-14T16:33:59.340 に答える
6

同じ問題がありました。Chrome で開発者ツールを使用しようとしましたが、役に立ちませんでした。最終的に、ID セレクターと :hover 属性の間の余分なスペースを削除する必要があることがわかりました。例えば、

#button :hover {
  background-color: #7e7ecc;
}
上記のスニペットは機能しませんでしたが、以下のスニペットは機能しました

#button:hover {
  background-color: #7e7ecc;
}
私がそれを理解した瞬間、それが問題の原因であることがわかりましたが、他の誰かが行き詰まった場合に備えて、そこに行きます

于 2020-04-13T02:35:25.610 に答える
3

これが古い投稿であることはわかっていますが、誰かが私と同じ問題を抱えている場合に備えて、投稿します。

私にとっての解決策は、:hover CSS を表示しないボタンに、要素 ID を介して設定されたカスタム背景があることでした。私はそれをクラスに切り替え、その後 :hover スタイリングを見ることができました。要素タグ名で設定された :hover スタイル設定よりも、ID バックグラウンド スタイル設定が優先されると思います。

于 2016-06-01T17:08:55.093 に答える
2

念のため、このcssで同じ問題を抱えていました。テストページで、cssに他に何もありません。2 つの CSS スタイルのみを接合します。

次の css では、ホバーが機能しませんでした (:hover宣言が宣言の前であることを確認してくださいbackground-color)。

button:hover{
  background-color:#DDDDDD;
}
button.myButton{
  background-color:transparent;
}

そして、そのcssを別の順序で書くだけで解決しました（:hover宣言が宣言の後にあることを確認してくださいbackground-color）：

button.myButton{
  background-color:transparent;
}
button:hover{
  background-color:#DDDDDD;
}

この「注文」は:hover再び機能するようになるため、問題を解決した:hover後に宣言します。background-color

なぜこの「順序」が影響するのですか?、私にはわかりません。宣言の順序が影響するのは論理的ではありませんが、(少なくとも FireFox バージョン 70.0.1 では)影響します。多分それはウェブブラウザでの悪い実装です!!!

于 2019-11-08T07:53:21.763 に答える
-1

この投稿はあなたの質問に答えるかもしれません: IE 8 CSS hover over input element issue

ページがブラウザを互換モードに強制している可能性があります。

于 2013-02-14T16:29:24.567 に答える