كيفية تغيير نمط عنصر/حاوية عندما يكون التركيز "داخل"؟

Question

لنفترض أن يكون لديك رمز مثل هذا:

<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>

لنفترض الآن أنني شيء من هذا القبيل (إنه مجرد مثال) لكل عنصر من عناصر النموذج. أرغب في تغيير النمط من عدم الانحراف إلى المحدد عندما:

• يركز المستخدم على عنصر الإدخال
• يقوم المستخدم بنقل الماوس على Div غير المنحنى

عندما يغير التركيز ، يجب أن يصبح Div المختار غير مرتبة مرة أخرى.

أود أن أفعل شيئًا كهذا لزيادة حجم نص Div المحدد. على أي حال ، قد يكون الأمر رائعًا لإجراء تغييرات أخرى أيضًا ، لذا أفضل تغيير سمة الفصل.

ما هي أفضل طريقة لفعل شيء مثل هذا في JavaScript؟ هل هناك أي إطار عمل JavaScript يمكن أن يعزز لي فعل هذا الشيء؟ لذلك سيكون من السهل إضافة تأثيرات مثل التلاشي وما إلى ذلك ...

لقد قمت بتنزيل Mootools ولكن مع قراءة سريعة للمستندات لم أر كيفية القيام بذلك دون الحصول على معرف محدد لأي من النماذج Div ، ولكن هي المرة الأولى التي أستخدمها. لا توجد مشكلة في استخدام أي إطار عمل آخر ، ولكن إذا اقترحت إطارًا واحدًا ، فيرجى كتابة ما يجب أن أبحث عنه على وجه التحديد.

Answer 1

أوصي بإلقاء نظرة على jQuery لمهمتك. من السهل جدًا التعلم وينتج تأثيرات لطيفة بسرعة. لكن تأثيرك الموصوف وحده ، سيكون JavaScript النقي أيضًا كافياً.

اجعل divs الخاص بك دائمًا فئة تسمى "يمكن اختيارها". يمكنك تبديل فصول CSS الأخرى لاحقًا. قم بإنشاء فئة CSS تسمى "Selection" ومنحها المظهر المطلوب.

<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");
    }
  );
});

هذا لم يختبر لذلك قد يكون هناك خلل فيه ، لكنه سيعطيك الفكرة العامة من أين تبدأ.

ملاحظة: قد لا يكون تغيير حجم النص على تحرك الماوس هو الأفضل من بين جميع الأفكار. يؤدي إلى إعادة ترتيب تخطيط الصفحة الذي يزعج المستخدم.

Answer 2

هناك أيضًا حل CSS نقي لهذه المشكلة. ومع ذلك ، لا يعمل في MSIE 6. من الناحية الفنية ، فهو يعمل على غرار حل Tomalek ، ولكن بدلاً من استخدام JavaScript لتبديل فئة العنصر ، فإنه يستخدم CSS لتبديل أسلوبه:

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

Answer 3

@Tomalak:

Why are you querying the DOM four times?

A small edit, but a huge speed-benefit:

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

Answer 4

This is somewhat unrelated, but the label tag does not enclose the input tag. You give the label tag a "for" attribute which corresponds to the ID of the input element. Example,

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

Answer 5

Yet another unrelated-to-the-original-question answer but... jQuery also has an alternative syntax for doing mouseover/mouseout stuff called hover.

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

Example,

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

Sorry for those double $'s, I can't seem to figure out how to escape that.