استهداف العناصر لتفاعلات التحويم

عند العمل مع HTML وCSS، غالبًا ما يكون من الضروري التحكم في سلوك العنصر بناءً على التمرير حالة عنصر آخر. يمكن تحقيق ذلك من خلال محددات CSS التي تستهدف علاقات محددة بين العناصر.

في السيناريو المحدد، حيث يكون الهدف هو تعديل خصائص #cube div عند تمرير مؤشر #container div، يمكن للمحددات التالية يمكن استخدامها:

• #container:hover > #cube: يستهدف هذا المحدد #cube div فقط عندما يكون فرعًا مباشرًا لـ #container div عند التمرير.
• #container:hover #cube: يستهدف هذا المحدد #cube div فقط عندما يكون شقيقًا مجاورًا لـ #container div عند التمرير.
• #container :hover #cube: يستهدف هذا المحدد #cube div في أي مكان داخل div #container عند التمرير.
• #container:hover ~ #cube: يستهدف هذا المحدد #cube div فقط عندما يكون تابعًا لـ #container div عند التمرير فوقه.

باستخدام هذه المحددات، يمكنك التحكم بشكل فعال في سلوك #cube div استنادًا إلى حالة التمرير لـ #container div ، بغض النظر عن قربها أو وضعها النسبي في بنية HTML.