كيفية إضافة تسطير CSS عند التحويم

أحب تأثيرات تحويم المؤشر – سواء كانت خفيفة وبسيطة أو مميزة، يمكن أن يجعل تأثير التحويم تجربة التصفح أكثر متعة للزوار.

كيفية إضافة تسطير عند التحويم باستخدام CSS

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

<a href=”#”>هذا هو بعض النص المرتبط</a>

ثم، سنكتب بعض قواعد CSS لتحقيق تأثير التحويم. نظرًا لأن عنصر الرابط يضيف تسطيرًا للنص بشكل افتراضي، سنقوم بإزالة ذلك باستخدام خاصية text-decoration:

a { text-decoration: none; }

أخيرًا، دعنا ننشئ قاعدة CSS تنطبق عندما يحوي المؤشر فوق عنصر الرابط. سنضيف قاعدة أخرى ونستخدم الصنف الوهمي :hover في CSS. تنطبق التصريحات لـ a:hover فقط عندما يكون رابط الرابط في حالة التحويم – بعبارة أخرى، عندما يكون مؤشر المستخدم موجودًا فوق عنصر الرابط.

a:hover { text-decoration: underline; }

الآن، يجب أن يعمل تأثير التسطير عند التحويم بشكل جيد – هنا نتيجة الكود أعلاه مع بعض النص الفقرة الإضافي حول عنصر الرابط:

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

تأثير التسطير والوصولية

إزالة التسطير من الروابط عادةً ما تكون خيارًا سيئًا من حيث الوصولية في الحالات التي يحيط الرابط بنص مشابه آخر (على سبيل المثال، فقرة). هذا لأن التسطير هو تقليد معترف به للروابط – إنه مؤشر بصري على أن النص هو رابط.

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

إذا كنت ترغب في إزالة التسطير مع الحفاظ على روابطك قابلة للوصول، فإن مبادئ واجهة محتوى الويب (WCAG) تتطلب ما يلي:

1. يجب أن يكون لون نص الرابط له نسبة تباين 3:1 مع النص الغير مرتبط المحيط.
2. يجب أن يكون هناك بعض المؤشر البصري للرابط يظهر عند تحويم الماوس والتركيز على لوحة المفاتيح – يسمي WCAG هذا “مؤشر غير لوني”. في حالتنا، سيكون المؤشر غير اللوني هو التسطير الذي يظهر عند التحويم. يستخدم الصنف الوهمي :focus بالإضافة إلى الصنف الوهمي :hover. يضمن الصنف الوهمي :focus ظهور التسطير عندما يكون عنصر الرابط في التركيز، للأشخاص الذين يستخدمون أدوات التحكم بالمفاتيح للتنقل في الصفحة.

أدناه، أعدت إنشاء المثال من الإصدار السابق ولكن أضفت الصنف الوهمي :focus بالإضافة إلى الصنف الوهمي :hover.

أمثلة على تسطير عند التحويم باستخدام CSS

دعنا نلقي نظرة على بعض أمثلة تأثير التسطير وكيف يمكنك إعادة إنشائها بنفسك.

Apple

لنلقي نظرة على مثال حقيقي لتأثير التسطير عند التحويم، دعنا نلقي نظرة على موقع Apple. الروابط في الصفحة الرئيسية تفعل بالضبط ما قمنا ببرمجته أعلاه:

Pitchfork

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

تأثير التسطير المتوسع

هذا التأثير من @jstn على Codepen يستخدم تحريك CSS لإنشاء عنصر مكعب يتوسع عندما يتم التحويم فوق عنصر القائمة. أنا أستمتع بالتأثير السلس الذي يضيف لمسة من الأناقة دون أن يكون مزعجًا.

تأثير التسطير المتوسع وتغيير اللون

أحب كيف يدمج هذا المثال من Tapajyoti Bose كل من تأثير التسطير المتوسع وتأثير تغيير اللون.

تأثير التسطير المتحرك بخط اليد

هذا المثال يذهب حقًا إلى أبعد من ذلك مع تأثيره المتحرك. يستخدم @sharkcoder SVG لمحاكاة سكب الحبر الذي يظهر أسفل النص. أعتقد أن هذا يظهر إبداعًا مثيرًا للإعجاب، ويمكنني رؤية تطبيق هذه التقنية على روابط التنقل في موقع ما، على سبيل المثال.

كما رأينا من الأمثلة، هناك أكثر من طريقة واحدة لإنشاء تأثير التسطير باستخدام CSS لروابط الصفحة الخاصة بك. بالطبع، يمكنك أن تكون مبدعًا قدر ما تشاء، ولكنني أعتقد أن هناك أناقة في البساطة.

في رأيي، يجب أن يكون هدف هذا التأثير هو توجيه المستخدمين نحو النتيجة المرغوبة، سواء كان ذلك زيارة صفحة معينة أو تحويل. ولكن، طالما أنك تصمم للوصولية، فمن الصعب عليّ أن أحكم.

Source: https://blog.hubspot.com/website/css-underline-on-hover