مشاكل في ال hover

Muhammad Alahmad · 11 أغسطس 2023

عند وضع مؤشر الفأرة على العنصر يقوم العنصر بالتحرك حركة بسيطة بينما ارغب بأن يبقى ثابتا مع اضافة بوردرtemplate-2.zip

عمر قره محمد · 11 أغسطس 2023

سبب المشكلة هو انك تقوم باستدعاء الملف style.css قبل باقي ملفات الـ css الخاصة بالمكاتب المختلفة ولحل المشكلة قم بنقله إلى الاخير كما في الكود التالي :

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<!-- css files  -->
	<link rel="stylesheet" href="/css/all.min.css">
	<link rel="stylesheet" href="/css/normalize.css">
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
	<link rel="stylesheet" href="/css/style.css">
	<!-- font file -->
	<link rel="preconnect" href="https://fonts.googleapis.com">
	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
	<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;800&display=swap" rel="stylesheet">
	<title>Ksaper | template two</title>
</head>

حيث يجب ان يتم استيراد الملفات المخصصة (التي قمت بكتابتها بنفسك) في الاخير دائماً من اجل الا يتم تجاهلها لصالح الخصائص الخاصة بالمكاتب التي يتم استيرادها.

كما لاحظت وجود خطأ املائي في كتابة الـ class المسمى active في HTML :

<nav>
  <ul>
    <li><a href="#" class="active">Services</a></li>
                          ^^^^^^^^
    <li><a href="#">Portfolio</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Pricing</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
  <form action="" class="form">
    <i class="fas fa-search"></i>
  </form>
</nav>

Muhammad Alahmad · 11 أغسطس 2023

بتاريخ 4 ساعة قال عمر قره محمد:
سبب المشكلة هو انك تقوم باستدعاء الملف style.css قبل باقي ملفات الـ css الخاصة بالمكاتب المختلفة ولحل المشكلة قم بنقله إلى الاخير كما في الكود التالي :
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	
	<link rel="stylesheet" href="/css/all.min.css">
	<link rel="stylesheet" href="/css/normalize.css">
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
	<link rel="stylesheet" href="/css/style.css">
	
	<link rel="preconnect" href="https://fonts.googleapis.com">
	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
	<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;800&display=swap" rel="stylesheet">
	<title>Ksaper | template two</title>
</head>
حيث يجب ان يتم استيراد الملفات المخصصة (التي قمت بكتابتها بنفسك) في الاخير دائماً من اجل الا يتم تجاهلها لصالح الخصائص الخاصة بالمكاتب التي يتم استيرادها.

كما لاحظت وجود خطأ املائي في كتابة الـ class المسمى active في HTML :
<nav>
  <ul>
    <li><a href="#" class="active">Services</a></li>
                          ^^^^^^^^
    <li><a href="#">Portfolio</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Pricing</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
  <form action="" class="form">
    <i class="fas fa-search"></i>
  </form>
</nav>

المشكلة لم تحل مع الاسف

Mustafa Suleiman · 11 أغسطس 2023

بتاريخ منذ ساعة مضت قال Muhammad Alahmad:

المشكلة لم تحل مع الاسف

المشكلة بسبب أنه عند عمل Hover على عناصر قائمة التنقل، يتم تطبيق التنسيق التالي:

header nav ul li a:hover {
    color: var(--main-color);
    border-bottom: 1px solid var(--main-color);
}

وبسبب إضافة border-bottom تحدث تلك المشكلة.

Thaer Alhabbash · 11 أغسطس 2023

الحركة تحدث بسبب استخدام خاصية الـ border-bottom عند وضع المؤشر على العنصر , ولتجنب الحركة عليك باختيار احدى الحلين:
1- تجنب استخدام خاصية الـ border-bottom وقم بحذفها بحيث يصبح الكود كالتالي:

header nav ul li a:hover {
    color: var(--main-color);
}

2- يمكنك استخدام خاصية الـ border-bottom مع وضع حجم 0px لمنع حدوث الحركة كالتالي:

header nav ul li a:hover {
    color: var(--main-color);
    border-bottom: 0px solid var(--main-color);
}

يمكنك استخدام تنسيقات اخرى عالعنصر مثل وضع خط تحت العنصر عند وضع المؤشر عليه كالتالي:

header nav ul li a:hover {
    color: var(--main-color);
    border-bottom: 0px solid var(--main-color);
    text-decoration:underline;
}

بالتوفيق

عبدالباسط ابراهيم · 12 أغسطس 2023

بتاريخ 13 ساعة قال Muhammad Alahmad:

المشكلة لم تحل مع الاسف

الحل الوحيد لتطبيق ال border-bottom مع جعلها ثابته هو

جعل ال border-bottom موجودة بالفعل قبل ال hover ولكن transparent وعند تنفيذ ال hover يتم تغيير اللون فقط لذلك الحل هو إضافة السطر التالي

header nav ul li a {
    padding: 40px 10px;
    display: block;
    color: white;
    text-decoration: none;
    font-size: 14px;
    transition: 0.3s;
    position: relative;
    z-index: 2;
    border-bottom: 1px solid transparent;/* إضافة هذا السطر فقط */
}

إضافة السطر السابق سيحل المشكلة

مشاكل في ال hover

السؤال

Muhammad Alahmad

5 أجوبة على هذا السؤال

Recommended Posts

عمر قره محمد

Muhammad Alahmad

Mustafa Suleiman

Thaer Alhabbash

عبدالباسط ابراهيم

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية