تنسيق hover لا يعمل في كود CSS

Yazan Alali · الاثنين في 20:34

يعطيكم العافية مشكلتي في السطر 44 و 50 ما عم يشتغل معي الكود وحاولت اعرف وين المشكلة بس للاسف بتمنى مساعدتكم

<!DOCTYPE html>

<html lang="en">



<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Document</title>

<style>

*{

margin: 0;

padding: 0;

box-sizing: border-box;

}



img{

width: 100%;

border-radius: 10px 100px;

}

h1{

text-align: center;

font-size: 25px;

}

nav{

background-color: #0f1922;

opacity: 0.9;

padding: 30px 0 ;

margin: 30px 0;

border-radius: 10px 100px;

position: sticky;

top: 0;

text-align: center;

}

p{

margin: 40px 20px;

font-size: 20px;

}

a{

color: white;

padding:15px

30px ;

text-decoration: none;

font-size: 20px;

}

a:hover{

background-color: #16446c;

border-radius: 10px 100px;

transition: all 0.7s;

}

h1 :hover , p :hover{

background-color: hotpink;

padding: 20px 0;

transition: all 0,9s ;

border-radius: 15px;



}

</style>

</head>



<body>



<img src="img/pexels-agneselunecka-25857969.jpg" alt="asaa">

<nav>

<a href="www.google.com"> Most Popular</a>

<a href="www.google.com"> Top Rated</a>

<a href="www.google.com">Coming soon</a>

<a href="www.google.com">News</a>

</nav>



<h1 class="asaa">Main Title of the page</h1>

<p> Lorem ipsum dolor, sit amet consectetur adipisicing elit. Exercitationem explicabo assumenda, ex dolorem earum adipisci nihil impedit aliquam atque quae?</p>

<p> Lorem ipsum dolor, sit amet consectetur adipisicing elit. Exercitationem explicabo assumenda, ex dolorem earum adipisci nihil impedit aliquam atque quae?</p>

<p> Lorem ipsum dolor, sit amet consectetur adipisicing elit. Exercitationem explicabo assumenda, ex dolorem earum adipisci nihil impedit aliquam atque quae?</p>

<p> Lorem ipsum dolor, sit amet consectetur adipisicing elit. Exercitationem explicabo assumenda, ex dolorem earum adipisci nihil impedit aliquam atque quae?</p>

<p> Lorem ipsum dolor, sit amet consectetur adipisicing elit. Exercitationem explicabo assumenda, ex dolorem earum adipisci nihil impedit aliquam atque quae?</p>

<p> Lorem ipsum dolor, sit amet consectetur adipisicing elit. Exercitationem explicabo assumenda, ex dolorem earum adipisci nihil impedit aliquam atque quae?</p>

<p> Lorem ipsum dolor, sit amet consectetur adipisicing elit. Exercitationem explicabo assumenda, ex dolorem earum adipisci nihil impedit aliquam atque quae?</p>

<p> Lorem ipsum dolor, sit amet consectetur adipisicing elit. Exercitationem explicabo assumenda, ex dolorem earum adipisci nihil impedit aliquam atque quae?</p>

<p> Lorem ipsum dolor, sit amet consectetur adipisicing elit. Exercitationem explicabo assumenda, ex dolorem earum adipisci nihil impedit aliquam atque quae?</p>

<p> Lorem ipsum dolor, sit amet consectetur adipisicing elit. Exercitationem explicabo assumenda, ex dolorem earum adipisci nihil impedit aliquam atque quae?</p>

<p> Lorem ipsum dolor, sit amet consectetur adipisicing elit. Exercitationem explicabo assumenda, ex dolorem earum adipisci nihil impedit aliquam atque quae?</p>

<p> Lorem ipsum dolor, sit amet consectetur adipisicing elit. Exercitationem explicabo assumenda, ex dolorem earum adipisci nihil impedit aliquam atque quae?</p>

<p> Lorem ipsum dolor, sit amet consectetur adipisicing elit. Exercitationem explicabo assumenda, ex dolorem earum adipisci nihil impedit aliquam atque quae?</p>

<p> Lorem ipsum dolor, sit amet consectetur adipisicing elit. Exercitationem explicabo assumenda, ex dolorem earum adipisci nihil impedit aliquam atque quae?</p>

<p> Lorem ipsum dolor, sit amet consectetur adipisicing elit. Exercitationem explicabo assumenda, ex dolorem earum adipisci nihil impedit aliquam atque quae?</p>

<p> Lorem ipsum dolor, sit amet consectetur adipisicing elit. Exercitationem explicabo assumenda, ex dolorem earum adipisci nihil impedit aliquam atque quae?</p>

<p> Lorem ipsum dolor, sit amet consectetur adipisicing elit. Exercitationem explicabo assumenda, ex dolorem earum adipisci nihil impedit aliquam atque quae?</p>

<p> Lorem ipsum dolor, sit amet consectetur adipisicing elit. Exercitationem explicabo assumenda, ex dolorem earum adipisci nihil impedit aliquam atque quae?</p>

<p> Lorem ipsum dolor, sit amet consectetur adipisicing elit. Exercitationem explicabo assumenda, ex dolorem earum adipisci nihil impedit aliquam atque quae?</p>

<p> Lorem ipsum dolor, sit amet consectetur adipisicing elit. Exercitationem explicabo assumenda, ex dolorem earum adipisci nihil impedit aliquam atque quae?</p>

<p> Lorem ipsum dolor, sit amet consectetur adipisicing elit. Exercitationem explicabo assumenda, ex dolorem earum adipisci nihil impedit aliquam atque quae?</p>





</body>



</html>

تم التعديل في الاثنين في 20:41 بواسطة Mustafa Suleiman
تعديل عنوان السؤال ونص السؤال

Mustafa Suleiman · الاثنين في 20:39

تقصدين مشكلة عدم تغير الخلفية عند عمل hover على العنصر H1 و p؟

ذلك بسبب أنك وضعتي مسافة بين العنصر (المحدد) وبين الصنف الزائف :hover لذا الصحيح هو التالي:

      h1:hover,
      p:hover {
        background-color: hotpink;

        padding: 20px 0;

        transition: all 0, 9s;

        border-radius: 15px;
      }

لاحظي عدم وجود مسافة عند كتابة الصنف الزائف pseudo class .

محمد عاطف17 · الاثنين في 20:49

بسبب كتابة الأكواد دون تنسيق هنا فلقد إختلفت ترتيب الأسطر عما لديك .

إذا كنت تقصد عدم تطبيق تنسيقات العناصر عند ال hover عليها فهذا بسبب أنك قد وضعت مسافة فاصلة بين العنصر وبين الصنف الزائف حيث لا يجب وضع مسافة تفصل بينهم وهذا هو الكود الصحيح :

h1:hover,
p:hover {
  background-color: hotpink;
  padding: 20px 0;
  transition: all 0, 9s;
  border-radius: 15px;
}

ويمكنك قراءة الدرس التالي لكيفية إستخدام الأصناف و العناصر الزائفة :

Khaled Osama3 · الاثنين في 20:49

في 44 line: كتابة قيمة transition في الخاصية :hover. هناك فاصلة بدلًا من النقطة في القيمة 0,9s. يجب أن تكون القيمة مكتوبة هكذا: 0.9s.

اما في 50 line: الكود يحتوي على مسافة غير صحيحة بين وسم h1 والخاصية :hover. يجب أن تكون كتابة الخاصية :hover بدون مسافة بينها وبين الوسم. و هذا هو الحل:

h1:hover, p:hover {
    background-color: hotpink;
    padding: 20px 0;
    transition: all 0.9s;
    border-radius: 15px;
}

و يجب ان يكون اللينكات تبدأ ب http او https مثل هكذا:

<a href="https://www.google.com"> Most Popular</a>

و الكود النهائى يكون:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        img {
            width: 100%;
            border-radius: 10px 100px;
        }

        h1 {
            text-align: center;
            font-size: 25px;
        }

        nav {
            background-color: #0f1922;
            opacity: 0.9;
            padding: 30px 0;
            margin: 30px 0;
            border-radius: 10px 100px;
            position: sticky;
            top: 0;
            text-align: center;
        }

        p {
            margin: 40px 20px;
            font-size: 20px;
        }

        a {
            color: white;
            padding: 15px 30px;
            text-decoration: none;
            font-size: 20px;
        }

        a:hover {
            background-color: #16446c;
            border-radius: 10px 100px;
            transition: all 0.7s;
        }

        h1:hover,
        p:hover {
            background-color: hotpink;
            padding: 20px 0;
            transition: all 0.9s;
            border-radius: 15px;
        }
    </style>
</head>

<body>

    <img src="img/pexels-agneselunecka-25857969.jpg" alt="asaa">
    <nav>
        <a href="www.google.com"> Most Popular</a>
        <a href="www.google.com"> Top Rated</a>
        <a href="www.google.com">Coming soon</a>
        <a href="www.google.com">News</a>
    </nav>

    <h1 class="asaa">Main Title of the page</h1>
    <p> Lorem ipsum dolor, sit amet consectetur adipisicing elit. Exercitationem explicabo assumenda, ex dolorem earum adipisci nihil impedit aliquam atque quae?</p>
    <!-- باقي الفقرات... -->

</body>

</html>

Yazan Alali · الاثنين في 20:49

شكرا كثير على السرعة والاجابة

تنسيق hover لا يعمل في كود CSS

السؤال

Yazan Alali

رابط هذا التعليق

شارك على الشبكات الإجتماعية

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

Recommended Posts

Mustafa Suleiman

رابط هذا التعليق

شارك على الشبكات الإجتماعية

محمد عاطف17

رابط هذا التعليق

شارك على الشبكات الإجتماعية

Khaled Osama3

رابط هذا التعليق

شارك على الشبكات الإجتماعية

Yazan Alali

رابط هذا التعليق

شارك على الشبكات الإجتماعية

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

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية