نص بين رقمين من عدة نصوص وارقام ارغب بتلوين النص عند التأشير عليه

وعليكم السلام، أهلا بك صديقي.

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

1. عرف مصفوفة تحوي الايات القرانية التي تريد، وذلك لعدم كتابة كل اية في span او div يدويا مما يصعب ادخال او تعديل الايات في حال لزم ذلك.
2. قم بالمرور على عناصر المصفوفة (الايات) واعرض div لكل اية يحوي class موحد يسمى aya ويحوي توابع تعمل عند وصول مؤشر الفأرة عليه وعند خروجها.
3. عند مرور المؤشر على عنصر احصل على ال index (الترتيب) الخاص به لكي يتفعل تابع اللمس ويبحث عن العنصر الذي يحوي ال class المسى aya بالترتيب الذي حصلنا عليه وتغيير لونه، ومن ثم عند ازالة المؤشر سيتم البحث على ذات العنصر لتغيير اللون الى الطبيعي.

أي أنه سيتم عرض الايات وبعدها عند لمس اية معينة سيتم تخزين رقمها، ومن ثم البحث على الاية التي تحوي نفس الرقم وتغيير لونها، وعند ازالة الفأرة سيتم البحث على نفس الاية واعادة لونها للون الطبيعي.

const array = [
  "انا اعطيناك الكوثر",
  "فصل لربك وانحر",
  "ان شانئك هو الأبتر"
];

const handleMouseOn = (index) => {
  document.querySelectorAll('.aya')[index].style.color = "green";
}

const handleMouseOff = (index) => {
  document.querySelectorAll('.aya')[index].style.color = "inherit";
}

const YourComponent = () => (
  <div>
    {array.map((item, index) => (
      <div className='aya' key={index} onMouseOver={() => handleMouseOn(index)} onMouseOut={() => handleMouseOff(index)}>
        {item}
      </div>
    ))}
  </div>
);

export default YourComponent;