2

：focusなどの疑似クラスを使用してCSSで親を変更できないことについて読んだので、ここで何か間違ったことをしているのか、JavaScriptの代替手段があるのか​​を確認します。

可能であれば、JavaScriptはまったく使用したくないのですが。

これが私の現在のコードです：

.box:focus .test{
background: #00FF00;
}

そのため、テキストボックス.box内をクリックすると、コードによってDIV.testの背景が緑色に変更されます。

しかし、これはうまくいきません。誰かが私を正しい方向に向けてくれませんか、ありがとう。

これが私のHTMLのコードスニペットです。これはテストページなので、これがどのように機能するかを確認できます。

<input name="textfield" type="text" class="box" id="textfield" />

<div class="test" id="test">Content for  id "test" Goes Here</div>
4

4 に答える 4

3

javascriptでは、jQueryライブラリを大量に作成する場合は、jQueryライブラリをインストールします。親のcssを変更するjQueryを次に示します。

var parent = $(this).parent()

$('.box').focusin(function(){
    parent.css('background','#00FF00')
}).focusout(function(){
    parent.parent().css('background','transparent')
})
于 2012-08-18T23:15:13.337 に答える
3

これは、javascriptを使用せずに実際に可能です。確かに親を選択する方法はありませんが、cssを使用して兄弟を選択できます。ここに小さな例を設定します：http：//jsfiddle.net/k2dAp/1/

HTML

<div class='container'>
<input type='text' />
<div class='background'></div>
</div>

CSS

.container {
  border: red solid 1px; 
  position: relative;    
}
.background {
  position: absolute;
  background: grey;
  width: 100%;
  height: 100%;
  z-index: -1;
  top: 0;
  left: 0;   
}
input {
  margin: 10px;   
}
input:focus + .background {
  background: green;   
}

ご覧のとおり、絶対位置とz-indexを追加することで、背景として機能するdivを追加しました。+次に、セレクターを使用してアクセスできます。これは古いバージョンのIEとは互換性がありませんが、最新のブラウザーでは正常に機能し、大幅に低下するはずです。jsの追加はおそらくより多くのブラウザで機能しますが、jsが無効になっている人にはオフコースではありません。

于 2012-08-18T23:59:18.840 に答える
2

コードスニペットなどの詳細を教えてもらえますか...

jsはほとんど何でもできるので、答えはイエスですjsの代替手段があります

于 2012-08-18T22:34:42.003 に答える
2

これは、jqueryを使用してこのようなjavascriptを介してのみ行うことができます

$("#textfield").click(function(){
$("#test").css('background-color','#333');
})
于 2012-08-18T22:42:18.367 に答える