تفاعل النص المخفي عند تحويل المؤشر باستخدام CSS و JavaScript

عندما نتعامل مع تحقيق هذه المتطلبات، يمكننا اللجوء إما إلى لغة ورقة الأنماط CSS أو استخدام لغة البرمجة JavaScript. في هذا السياق، سنقوم بشرح كيفية تحقيق هذا الهدف باستخدام كلا الأسلوبين.

أولاً، سنتعامل مع CSS. يمكننا استخدام التحديد “:first-child” لاستهداف أول عنصر في القائمة غير المرتبة (ul) ومن ثم عرض النص المخفي عند تحويل المؤشر عليه. إليك كيف يمكن تحقيق ذلك:

cssCopy code
ul li:first-child:hover + label {
  display: inline;
}

الشيفرة أعلاه تعني أنه عند تحويل المؤشر إلى أول عنصر li داخل القائمة غير المرتبة (ul)، سيتم عرض العنصر الذي يليه مباشرة (label) بناءً على التحديد :first-child واستخدام “:hover” لتنشيط الحالة عند التحويل بالمؤشر.

الآن، إذا كنت تفضل استخدام JavaScript، يمكنك القيام بذلك باستخدام مشغل الأحداث (Event Listener) للاستماع إلى حدث التحويل بالمؤشر وتغيير عرض العنصر المخفي. إليك مثال باستخدام JavaScript:

jsCopy code
document.querySelector('ul li:first-child').addEventListener('mouseover', function() {
  document.querySelector('label').style.display = 'inline';
});

document.querySelector('ul li:first-child').addEventListener('mouseout', function() {
  document.querySelector('label').style.display = 'none';
});

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

في الختام، يتيح لنا الاختيار بين CSS و JavaScript تحقيق هذا الهدف بطرق مختلفة وفقًا لاحتياجات المشروع وتفضيلات المطور.

فيما يلي توسيع للمعلومات حول الطرق المذكورة لتحقيق عرض نص مخفي عند تحويل المؤشر:

استخدام CSS:

1. التحديد :first-child:

يعد :first-child في CSS وسيلة قوية لاستهداف العناصر الأولى داخل عناصر أخرى. في هذا السيناريو، يتم تحديد أول عنصر li داخل القائمة غير المرتبة (ul) باستخدام :first-child. عند حدوث التحويل بالمؤشر، يتم عرض النص المخفي الذي يليه مباشرة.

2. استخدام “:hover”:

يعد “:hover” واحدًا من التحديدات في CSS التي تمكننا من تحديد العناصر عند حدوث التحويل بالمؤشر. في هذا السياق، نستخدم “:hover” لتنشيط عرض النص المخفي عندما يتم تحويل المؤشر إلى العنصر الأول li داخل القائمة غير المرتبة.

استخدام JavaScript:

1. Event Listener:

يعتبر مشغل الأحداث (Event Listener) في JavaScript وسيلة ديناميكية لربط الأحداث مثل التحويل بالمؤشر بوظائف معينة. في هذا السيناريو، يتم استخدام Event Listener للتعامل مع حدثي التحويل بالمؤشر والمغادرة من فوق العنصر الأول li. عند حدوث التحويل، يتم تغيير عرض النص المخفي إلى “inline”، وعند المغادرة، يتم إعادته إلى “none”.

2. تحديد العناصر باستخدام querySelector:

يعتبر querySelector في JavaScript وسيلة فعالة لتحديد العناصر DOM. في هذا السياق، يتم استخدام querySelector للعثور على العنصر الأول li داخل القائمة غير المرتبة وتطبيق Event Listener عليه. أيضًا، يتم استخدام querySelector للعثور على العنصر label وتغيير عرضه بناءً على حدث التحويل بالمؤشر.

الاستنتاج:

تحقيق هذا الهدف يعتمد على متطلبات المشروع وتفضيلات المطور. يمكن استخدام CSS للقضاء على الحاجة إلى كتابة كود JavaScript إضافي، ولكن إذا كان هناك حاجة للتفاعلية الديناميكية أو مزيد من التحكم، يمكن استخدام JavaScript لتحقيق ذلك بكفاءة.