2017-11-28 5 views
-2

フィールドがユーザーによって入力される必要があるフォームがあります。ユーザーがフィールド上を移動すると、色を変更したいと思います。 私はこれを単一のフィールドで始めることを試みています。入力フィールドの背景色をホバー(マウスオーバー)に変更

.f2:hover{ 
    border: 10px solid red; 
    border-top-color: orange; 
    background-color: red; 
    opacity:1.0; 
} 

ボーダーの色が変化しているが、フィールドには、色を変えていない:私は、次のCSSを持っています。
助けがあれば助かります。

+2

コードの小さな断片で明らかに間違っていることはありません。 [mcve]を提供してください(できれば、スタックスニペットのライブデモの形で) – Quentin

+0

まあ、私はフィドルであなたのコードを試して、それは正常に動作します: https://jsfiddle.net/971nneuc/ 多分例私たちは問題を見るのを助けるでしょう –

答えて

0

あなたのCSSは次のようになります。

.f2 { 
    background-color: green; 
    width: 100px; 
    height: 100px; 
} 

.f2:hover { 
    background-color: red; 
    border: 4px solid red; 
} 

ここでは動作します。

https://jsfiddle.net/wab9na2z/

次の時間は、あなたはポストは、詳細を追加し、私たちに多くのコードを表示し、あなたの問題の詳細情報をご提供します。私はこれがあなたの問題とフロントエンドの開発を学ぶ道に幸運を解決することを願っています。

-1

これは私のため

.f2:hover \t { border: 2px solid black; background-color: red; opacity:1.0;}
<div class="f2">Testing</div>

+1

はい、しかしOPは入力要素の背景色を変更したいです。 – chb

0

を働いていたがこれで試してみてください。

<!DOCTYPE html> 
<html> 
<head> 
    <title></title> 
    <style> 
    .f2:hover{ 
     border: 10px solid red; 
     border-top-color: orange; 
     background-color: red; 
     opacity:1.0; 
    } 
    </style> 
</head> 
<body> 
    <form> 
    <input class="f2" type="text" name=""> 
    <input class="f2" type="text" name=""> 
    </form> 
</body> 
</html> 
+0

これを試してください、これは私のために働いた。フォームタグではなく、各入力タグに名前クラスを入れてください。 –

関連する問題