דילוג לתוכן
  • דף הבית
  • קטגוריות
  • פוסטים אחרונים
  • משתמשים
  • חיפוש
  • חוקי הפורום
כיווץ
תחומים

תחומים - פורום חרדי מקצועי

💡 רוצה לזכור קריאת שמע בזמן? לחץ כאן!
  1. דף הבית
  2. תכנות
  3. transition לא מגיב

transition לא מגיב

מתוזמן נעוץ נעול הועבר תכנות
6 פוסטים 4 כותבים 205 צפיות 3 עוקבים
  • מהישן לחדש
  • מהחדש לישן
  • הכי הרבה הצבעות
תגובה
  • תגובה כנושא
התחברו כדי לפרסם תגובה
נושא זה נמחק. רק משתמשים עם הרשאות מתאימות יוכלו לצפות בו.
  • yyyY מנותק
    yyyY מנותק
    yyy
    כתב ב נערך לאחרונה על ידי
    #1

    סביבת אנגולר:
    html

        <div style="background-color: #FCA311;
                            width:max-content;
                            transition: background-color ;
                            transition-duration: 1s;
                            cursor: pointer;"
                    class="aUser">
                    <i  class="pi pi-user-plus"></i>
                    <p >הוסף</p>
                </div>
    
    

    css:

    .aUser:hover {
       background-color: rgb(127, 13, 234);
     }
    

    ה-transition לא פועל. יש למישהו השערה מדוע?
    נ.ב. למנהלי המערכת בערכת עיצוב החדשה של האתר כשקטע מוגדר כקוד הוא לא מיושר משמאל לימין.

    תגובה 1 תגובה אחרונה
    1
    • yossizY מנותק
      yossizY מנותק
      yossiz
      כתב ב נערך לאחרונה על ידי yossiz
      #2

      @yyy כתב בtransition לא מגיב:

      יש למישהו השערה מדוע?

      זה לא קשור ל-transition, הכלל לא חל בכלל
      זה קשור לדיני קדימה, הסטייל בתוך ה-HTML קודם לכל סטייל אחר
      הסטייל שבתוך ה-HTML חל גם על מצב של hover, כי ה-hover: זה סה"כ כאילו נוסף עוד קלאס בעת ריחוף (לכן זה נקרא psuedo class), בד"כ זה דורס את הסטייל הקודם כי סלקטור עם קלאס נוסף הוא יותר specific
      אבל פה זה לא עוזר כי גם סלקטור הכי פרטני (specificity גבוהה) לא יכול לדרוס סטייל בתוך ה-HTML

      📧 יוסי@מייל.קום | 🌎 בלוג | ☕ קפה

      חגיח תגובה 1 תגובה אחרונה
      4
      • yossizY yossiz

        @yyy כתב בtransition לא מגיב:

        יש למישהו השערה מדוע?

        זה לא קשור ל-transition, הכלל לא חל בכלל
        זה קשור לדיני קדימה, הסטייל בתוך ה-HTML קודם לכל סטייל אחר
        הסטייל שבתוך ה-HTML חל גם על מצב של hover, כי ה-hover: זה סה"כ כאילו נוסף עוד קלאס בעת ריחוף (לכן זה נקרא psuedo class), בד"כ זה דורס את הסטייל הקודם כי סלקטור עם קלאס נוסף הוא יותר specific
        אבל פה זה לא עוזר כי גם סלקטור הכי פרטני (specificity גבוהה) לא יכול לדרוס סטייל בתוך ה-HTML

        חגיח מנותק
        חגיח מנותק
        חגי
        כתב ב נערך לאחרונה על ידי
        #3

        @yossiz כתב בtransition לא מגיב:

        אבל פה זה לא עוזר כי גם סלקטור הכי פרטני (specificity גבוהה) לא יכול לדרוס סטייל בתוך ה-HTML

        כמובן עד שמוסיפים !important 🙂

        .aUser:hover {
           background-color: rgb(127, 13, 234) !important;
         }
        

        לא בדקתי את הבעיה הספציפית של הOP, אבל חשבתי שכדאי לדעת את זה בשביל לפתור את הבעיה. אם זאת באמת הבעיה כפי שציינת, זה אמור לפתור את זה.

        yossizY תגובה 1 תגובה אחרונה
        4
        • חגיח חגי

          @yossiz כתב בtransition לא מגיב:

          אבל פה זה לא עוזר כי גם סלקטור הכי פרטני (specificity גבוהה) לא יכול לדרוס סטייל בתוך ה-HTML

          כמובן עד שמוסיפים !important 🙂

          .aUser:hover {
             background-color: rgb(127, 13, 234) !important;
           }
          

          לא בדקתי את הבעיה הספציפית של הOP, אבל חשבתי שכדאי לדעת את זה בשביל לפתור את הבעיה. אם זאת באמת הבעיה כפי שציינת, זה אמור לפתור את זה.

          yossizY מנותק
          yossizY מנותק
          yossiz
          כתב ב נערך לאחרונה על ידי
          #4

          @חגי אכן. שכחתי לציין את זה

          📧 יוסי@מייל.קום | 🌎 בלוג | ☕ קפה

          תגובה 1 תגובה אחרונה
          1
          • dovidD מנותק
            dovidD מנותק
            dovid
            ניהול
            כתב ב נערך לאחרונה על ידי dovid
            #5

            סיכום התשובות של @yossiz ו@חגי,
            יש לכתוב בHTML ככה:

            <div class="aUser">
               <i class="pi pi-user-plus"></i>
               <p>הוסף</p>
            </div>
            

            ובCSS ככה:

            .aUser {
              background-color: #FCA311;
              width:max-content;
              transition: background-color ;
              transition-duration: 1s;
              cursor: pointer;
              background-color: rgb(127, 13, 234);
            }
            .aUser:hover {
              background-color: rgb(127, 13, 234);
            }
            
            • מנטור אישי בתכנות והמסתעף – להתקדם לשלב הבא!
            • בכל נושא אפשר ליצור קשר dovid@tchumim.com
            yyyY תגובה 1 תגובה אחרונה
            3
            • dovidD dovid

              סיכום התשובות של @yossiz ו@חגי,
              יש לכתוב בHTML ככה:

              <div class="aUser">
                 <i class="pi pi-user-plus"></i>
                 <p>הוסף</p>
              </div>
              

              ובCSS ככה:

              .aUser {
                background-color: #FCA311;
                width:max-content;
                transition: background-color ;
                transition-duration: 1s;
                cursor: pointer;
                background-color: rgb(127, 13, 234);
              }
              .aUser:hover {
                background-color: rgb(127, 13, 234);
              }
              
              yyyY מנותק
              yyyY מנותק
              yyy
              כתב ב נערך לאחרונה על ידי yyy
              #6

              @dovid
              רק לחדד שהחלק הקריטי אותו יש להעביר לרמת קובץ ה-CSS, הוא ה-background-color. כך:

              .aUser {
                background-color: #FCA311;
              }
              .aUser:hover {
                background-color: rgb(127, 13, 234);
              }
              

              ואגב בעקבות שרשור זה נודע לי
              שאי אפשר לממש hover ב-inline style.

              תגובה 1 תגובה אחרונה
              3
              תגובה
              • תגובה כנושא
              התחברו כדי לפרסם תגובה
              • מהישן לחדש
              • מהחדש לישן
              • הכי הרבה הצבעות


              בא תתחבר לדף היומי!
              • התחברות

              • אין לך חשבון עדיין? הרשמה

              • התחברו או הירשמו כדי לחפש.
              • פוסט ראשון
                פוסט אחרון
              0
              • דף הבית
              • קטגוריות
              • פוסטים אחרונים
              • משתמשים
              • חיפוש
              • חוקי הפורום