26

私は一種の奇妙な状況に陥っています。テキストを白に変える迷惑なホバーがあるため、無効な入力ボタンのスタイルを設定しようとしています。これは、通常のボタンのように機能するため、ユーザーを混乱させます。

主にcssといくつかのjQueryのものを試しました。可能な場合は、これをcssに保持したいと思います。

これは私の html です。申し訳ありませんが、larvel フォーム ヘルパーです。

{{ Form::submit('Change', array_merge($design_project->is_locked ? ['disabled' => 'disabled'] : [], ['class' => 'btn btn-blue span3'])) }}

これはブラウザが生成するものです

<input disabled="disabled" class="btn btn-blue span3" type="submit" value="Change">

そして、私はこのようなことに取り組んでいました

.btn:hover input[disabled], .btn:active input[disabled], .btn:focus input[disabled]{
  color:green
}

どんな助けでも素晴らしいでしょう！

4

3 に答える 3

57

この CSS を使用します ( jsFiddle の例):

input:disabled.btn:hover,
input:disabled.btn:active,
input:disabled.btn:focus {
  color: green
}

最も外側の要素を左側に、最も内側の要素を右側に記述する必要があります。

.btn:hover input:disabled現在ユーザーがホバーしているクラスを持つ要素に含まれる無効な入力要素を選択しbtnます。

議論のためにこの質問を参照して:disabledください。[disabled]

ところで、Laravel (PHP) はブラウザーではなく HTML を生成します。

于 2013-08-26T13:42:16.827 に答える
1

CSS セレクター内のスペースは、子要素を選択します。

.btn input

これは基本的にあなたが書いたもので、クラス<input>を持つ要素内の要素を選択します。btn

探していると思います

input[disabled].btn:hover, input[disabled].btn:active, input[disabled].btn:focus

これにより、との 3 つの異なる状態にある属性とクラスを<input>持つ要素が選択されます。disabledbtnhoveractivefocus

于 2013-08-26T13:41:44.913 に答える