تحقيق تأثير توهج عند مرور الفأرة واخفاء العناصر المت同级

يشرح هذا المثال كيفية استخدام jQuery لتحقيق تألقة عند النقر فوق، وتحول الآخرين إلى مظلم. يُشارك هذا معكم لتكونوا مرجعًا، كما يلي:

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
  <head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8"/>
    <meta name="keywords" content="كلمات المفتاحية1، كلمات المفتاحية2، كلمات المفتاحية3 وما إلى ذلك"/>
    <title>النقر فوق، يتم تلوين، والآخرين مظلمين</title>
    <style type="text/css">
      *{margin:0; padding:0;}
      ul,li{list-style:none;}
      ul{width:900px; height:200px; margin:100px auto;}
      li{width:200px; height:200px; display:inline-block; border:1px solid #d8d8d8; position:relative;}
      .addblack{width:200px; height:200px; display:none; background:#000;filter: alpha(opacity=10);-moz-opacity: 0.1; opacity: 0.1; position:absolute; left:0; top:0;}
    </style>
    <script type="text/javascript" src="jquery-1.7.2.min.js"></script>
    <script type="text/javascript">
      $(document).ready(function(){
         $(".index_Img").hover(function(){
           $(this).siblings().find(".addblack").show();
           },function(){}
             $(this).siblings().find(".addblack").hide();
             $(this).find(".addblack").hide();
         }
      }
    </script>
  </head>
  <body>
    <ul>
      <li class="index_Img">
        التفاح
        <div class="addblack" style="left: 0px; top: 0px; width: 200px; height: 200px; display: none;"></div>
      </li>
      <li class="index_Img">
        التفاح
        <div class="addblack" style="left: 0px; top: 0px; width: 200px; height: 200px; display: none;"></div>
      </li>
      <li class="index_Img">
        الخوخ
        <div class="addblack" style="left: 0px; top: 0px; width: 200px; height: 200px; display: none;"></div>
      </li>
      <li class="index_Img">
        المانجو
        <div class="addblack" style="left: 0px; top: 0px; width: 200px; height: 200px; display: none;"></div>
      </li>
    </ul>
  </body>
</html>

صورة التشغيل كما يلي:

للمزيد من المعلومات حول jQuery، يمكن للقراء المهتمين الرجوع إلى مواضيع الموقع الخاصة بنا: 'تحليل وتقديم تقنيات وتكتيكات التبديل jQuery'، 'تحليل وتقديم تقنيات وتكتيكات البحث في jQuery'، 'تحليل وتقديم تقنيات وتكتيكات التوسيع في jQuery'، 'تحليل وتقديم تقنيات وتكتيكات الأدوات المدمجة في jQuery'، 'تحليل وتقديم تقنيات وتكتيكات التبديل الترابط في jQuery'، 'تحليل وتقديم تقنيات وتكتيكات التعامل مع جداول (table) في jQuery'، 'تحليل وتقديم تقنيات وتكتيكات استخدام Ajax في jQuery'، 'تحليل وتقديم تقنيات وتكتيكات الأنماط الكلاسيكية الشائعة في jQuery'، 'تحليل وتقديم تقنيات وتكتيكات الأنماط المتحركة والتفاعلية في jQuery'، و 'تحليل وتقديم تقنيات وتكتيكات اختيار selectors في jQuery'.

آمل أن يساعدك هذا المقال في تصميم برامج jQuery.

البيان: محتوى هذا المقال تم جمعه من الإنترنت، ملكية المحتوى تخص صاحب الحقوق، تم إرسال المحتوى من قبل مستخدمي الإنترنت بشكل تلقائي، هذا الموقع لا يمتلك حقوق الملكية، لم يتم تعديل المحتوى بشكل يدوي، ولا يتحمل هذا الموقع أي مسؤولية قانونية متعلقة بذلك. إذا كنت قد وجدت محتوى يشتبه في انتهاك حقوق النسخ، فلا تتردد في إرسال بريد إلكتروني إلى: notice#oldtoolbag.com (عند إرسال البريد الإلكتروني، يرجى استبدال '#' بـ '@') لتقديم الشكوى، وتقديم الدليل المتعلق، إذا تم التحقق من ذلك، سيتم حذف المحتوى المزعوم فورًا.

تعليمية الأساس

الذوق الخاص بك