3

私は周りを見回しましたが、フォームがフォーカスされているときにタイトルを表示するための解決策が見つかりません. おそらく、明らかに明らかな何かが欠けているのでしょう (おそらく、このセレクターでは実行できないということです)。

理想的には、IE をサポートする予定がないので、jQuery を避けて CSS に固執したいと思います (より高度な CSS で問題ありません)。学ぶのは好きですが、IE は私にとって苦痛です。

これは現時点での私のCSSです：

#search-title {
    color: rgba(0, 0, 0, 0);
    font-size: 20px;
    font-weight: 300;
    margin-left: -30px;
    -webkit-transition: all 200ms;
    -moz-transition: all 200ms;
    -ms-transition: all 200ms;
    -o-transition: all 200ms;
    transition: all 200ms;
}

input[type="text"]:focus #search-title {
    color: #F70;
    margin-left: 35px;
}

前もって感謝します、

サム

4

4 に答える 4

6

OK、私は純粋に CSS で動作するソリューションを持っていますが、html 要素を少し動かす必要があります。

参照要素の子孫ではない (私が知っている) 別の要素を選択する唯一の方法は、兄弟セレクター(一般または隣接) を使用することです。ただし、その解決策は、参照要素 (入力) とターゲット (タイトル) が dom 階層の兄弟であることに依存しています。

簡単な例を次に示します: http://jsfiddle.net/7AaDc/1/

念のため、この例では一般的な兄弟セレクター (~) を使用していますが、この場合は隣接 (+) も同様に機能します。

兄弟（および子）セレクターのより良い説明は次のとおりです：http://css-tricks.com/child-and-sibling-selectors/

兄弟セレクターに関連する互換性の問題の概要は次のとおりです: http://caniuse.com/#search=sibling (tl;dr、最近はかなり広くサポートされています)

于 2012-07-20T00:26:05.700 に答える
1

子孫セレクターを使用しました。つまり、ルールに一致させるには、入力要素内に「＃search-title」を表示する必要がありますが、これは明らかに発生しません。

ドキュメントがどのように構造化されているかを考えると、入力が特定の状態である場合に＃search-titleに一致するCSSセレクターは実際にはありません。

于 2012-07-19T23:48:54.227 に答える
0

おそらく、フォーム内でdivを試してみるとうまくいくかもしれません

または、これらのいずれかを試してください

于 2012-07-19T23:18:37.887 に答える
0

問題は、ネストされていないアイテムのスタイルを設定しようとしているように見えます。

input[type="text"]:focus #search-title

search-titleは、要素が ' ' に一致する要素の子である場合に、id " " で要素のスタイルを設定するinput[type="text"]:focusように指示していますが、投稿したスニペットから、実際には DOM の意味での子ではないと推測しています。

兄弟のスタイル セレクター (たとえば、" A + B" は項目 B に一致しますが、前に A の兄弟がある場合のみ) を見ることができます。 DOM の再構築でトリッキーなことをするか、javascript にフォールバックします。

于 2012-07-19T23:55:35.320 に答える