Muhammad Alahmad نشر 11 أغسطس 2023 أرسل تقرير نشر 11 أغسطس 2023 عند وضع مؤشر الفأرة على العنصر يقوم العنصر بالتحرك حركة بسيطة بينما ارغب بأن يبقى ثابتا مع اضافة بوردرtemplate-2.zip 1 اقتباس
0 عمر قره محمد نشر 11 أغسطس 2023 أرسل تقرير نشر 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> 1 اقتباس
0 Muhammad Alahmad نشر 11 أغسطس 2023 الكاتب أرسل تقرير نشر 11 أغسطس 2023 بتاريخ 4 ساعة قال عمر قره محمد: سبب المشكلة هو انك تقوم باستدعاء الملف 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> المشكلة لم تحل مع الاسف 1 اقتباس
0 Mustafa Suleiman نشر 11 أغسطس 2023 أرسل تقرير نشر 11 أغسطس 2023 بتاريخ منذ ساعة مضت قال Muhammad Alahmad: المشكلة لم تحل مع الاسف المشكلة بسبب أنه عند عمل Hover على عناصر قائمة التنقل، يتم تطبيق التنسيق التالي: header nav ul li a:hover { color: var(--main-color); border-bottom: 1px solid var(--main-color); } وبسبب إضافة border-bottom تحدث تلك المشكلة. اقتباس
0 Thaer Alhabbash نشر 11 أغسطس 2023 أرسل تقرير نشر 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; } بالتوفيق اقتباس
0 عبدالباسط ابراهيم نشر 12 أغسطس 2023 أرسل تقرير نشر 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;/* إضافة هذا السطر فقط */ } إضافة السطر السابق سيحل المشكلة 1 اقتباس
السؤال
Muhammad Alahmad
عند وضع مؤشر الفأرة على العنصر يقوم العنصر بالتحرك حركة بسيطة بينما ارغب بأن يبقى ثابتا مع اضافة بوردرtemplate-2.zip
5 أجوبة على هذا السؤال
Recommended Posts
انضم إلى النقاش
يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.