フォーカスが＆＃8220;内側＆＃8221;のときに要素/コンテナーのスタイルを変更する方法それ？

StackOverflow https://stackoverflow.com/questions/216185

質問

次のようなコードがあるとします：

<div class="notSelected">
      <label>Name
          <input type="text" name="name" id="name" />
      </label> 
      <div class="description">
          Tell us what's your name to make us able to fake to be your friend 
          when sending you an email.
      </div>
</div>

今、フォームの各要素に対してこのようなもの（例にすぎません）があるとします。 次の場合にスタイルをnotSelectedからSelectedに変更したい：

  • ユーザーが入力要素にフォーカスする
  • ユーザーがマウスをnotSelected divに移動します

フォーカスを変更すると、Selected divはnotSelectedになります。

このようなことをして、選択したdivのテキストのサイズを増やしたいと思います。とにかく、他の変更を加えることもできるので、クラス属性を変更することをお勧めします。

JavaScriptでこのようなことを行う最良の方法は何ですか？このことを私に後押しできるJavaScriptフレームワークはありますか？フェードなどの効果を簡単に追加できます...

MooToolsをダウンロードしましたが、ドキュメントをすばやく読みましたが、フォームdivの特定のIDを持たずにこれを行う方法がわかりませんでしたが、初めて使用しました。他のフレームワークを使用しても問題ありませんが、提案する場合は、具体的に何を探すべきかを書いてください。

役に立ちましたか？

解決

タスクについてはjQueryをご覧になることをお勧めします。学ぶのは非常に簡単で、すてきな効果をすばやく生成します。ただし、説明した効果だけで、純粋なJavaScriptでも十分です。

DIVには常に「選択可能」というクラスを作成します。後で他のCSSクラスを切り替えることができます。 ＆quot; selected＆quot;という名前のCSSクラスを作成します。希望の外観にします。

<div class="selectable">  (=off) vs. <div class="selectable selected"> (=on)

次に、ドキュメントのスクリプトセクションに次のようなものを追加します。

$(document).ready(function(){

  // handle mouseover and mouseout of the parent div
  $("div.selectable").mouseover(
    function() { 
      $(this).addClass("selected").addClass("mouseIsOver");
    }
  ).mouseout(
    function() { 
      $(this).removeClass("selected").removeClass("mouseIsOver");
    }
  );

  // handle focus and blur of the contained input elememt,
  // unless it has already been selected by mouse move
  $("div.selectable input").focus(
    function() {
      $(this).parents("div.selectable").not(".mouseIsOver").addClass("selected");
    }
  ).blur(
    function() {
      $(this).parents("div.selectable").not(".mouseIsOver").removeClass("selected");
    }
  );
});

これはテストされていないため、不具合が発生する可能性がありますが、どこから始めればよいかがわかります。

PS：マウスの移動時にテキストサイズを変更することは、すべてのアイデアの中で最良とは限りません。これは、ユーザーにとって迷惑なページレイアウトの再配置につながります。

他のヒント

この問題に対する純粋なCSSソリューションもあります。ただし、MSIE 6では機能しません。技術的には、Tomalekのソリューションと同様に機能しますが、JavaScriptを使用して要素のクラスを切り替える代わりに、CSSを使用してスタイルを切り替えます。

.selectable { /* basic styles …  */ }
.selectable:hover { /* hover styles … */ }
.selectable:active { /* focus styles … */ }

@Tomalak：

なぜDOMを4回クエリするのですか？

小さな編集でありながら、大きな速度のメリット：

$("div.selectable").mouseover(function ()
{
    // ...
}).mouseout(function ()
{
    // ...
});

これはやや無関係ですが、ラベルタグは入力タグを囲みません。ラベルタグに「for」を付けます。入力要素のIDに対応する属性。例、

<label for="username">Username</label>
<input type="text" name="username" value="Enter your username..." id="username" />

元の質問とは無関係の別の答えがありますが... jQueryには、ホバーと呼ばれるマウスオーバー/マウスアウトを行うための代替構文もあります。

$(element).hover(function(){ /* mouseover */ }, function(){ /* mouseout */ });

例、

$('ul#nav li').hover(function() {
    $(this).addClass('highlight');
}, function() {
    $(this).removeClass('highlight');
});

これらの二重の$がありますが、それをエスケープする方法がわかりません。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top