0

私はそのようなhtml構造を持っています:

<form class="form">
                <div class="row">
                    <input id="search" class="search-input" type="text" placeholder="Search">
                    <div class="input-icon" data-icon="s"></div>
                    <div class="triangle-left"></div>                    
                 </div>
            </form>

そして、次の CSS コード ウィッチを知っておくことが重要です。

input[type="text"]:focus, input[type="text"]:hover, input[type="password"]:focus, input[type="password"]:hover {
    border:1px solid #ffa800;
    box-shadow: 0 0 5px #ffa800, 0 4px 4px rgba(0,0,0,.1) inset;
    -moz-box-shadow: 0 0 5px #ffa800, 0 4px 4px rgba(0,0,0,.1) inset;
    -webkit-box-shadow: 0 0 5px #ffa800, 0 4px 4px rgba(0,0,0,.1) inset;
}
input[type="text"]:focus + .input-icon:before, input[type="text"]:hover + .input-icon:before, input[type="password"]:focus + .input-icon:before, input[type="password"]:hover + .input-icon:before{
    color:#ffa800;
    border-color: #ffa800;
}
input[type="text"]:focus  .triangle-left, input[type="text"]:hover .triangle-left, input[type="password"]:focus .triangle-left, input[type="password"]:hover .triangle-left{
    border-color:transparent transparent transparent #ffa800;
}

最初のコードは、クラスinput-iconでdivの入力をホバーまたはフォーカスすると、新しい色と境界線の色を取得するとうまく機能します。私の質問は、2 番目の div (.triangle-left) も変更できますか? 私はそれを試しましたが、うまくいきません。最初の div のみが影響を受けます。divを変更すると、cssコードよりも最初の三角形が機能します。

これを行う方法を知っていますか、または小さな jquery スクリプトを使用する唯一の可能性はありますか?

ご協力いただきありがとうございます：）

よろしくCrazymodder

4

1 に答える 1

0

簡単な編集として: http://jsfiddle.net/xngbv/.triangle-left問題は、ホバーとフォーカスに必要なスタイルを使用するための 設定が実際には何もなかったことです。.triangle-leftはdivであり、いかなる種類の入力でもないため、を使用した最後のブロックで設定したスタイルは.triangle-left効果がありませんでした

編集：レンダリングに影響を与えた変更は使用しています

.triangle-left:focus, .triangle-left:hover

それ以外の

input[type="text"]:focus .triangle-left, input[type="text"]:hover .triangle-left

あなたがそれを持っていたので、スタイルはフォーカス/ホバー時にテキスト型の入力に適用され、それも style を持っていますtriangle-left。クラスtriange-leftを持つ唯一の要素は a だったdivので、要素は影響を受けませんでした。必要なのは、実際に設定されている要素にスタイルを直接適用することですtriangle-left。クラス名だけで行きたくない場合は、div.triangle-left:focusまたは同様のものを使用できます。

于 2012-08-06T17:36:19.477 に答える