transition לא מגיב

[yyy]

סביבת אנגולר:
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 לא פועל. יש למישהו השערה מדוע?
נ.ב. למנהלי המערכת בערכת עיצוב החדשה של האתר כשקטע מוגדר כקוד הוא לא מיושר משמאל לימין.

[yossiz]

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

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

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

[חגי]

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

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

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

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

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

[yossiz]

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

[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);
}

[yyy]

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

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

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