בסרטון הזה נראה איך ליצור טולטיפ, כלומר איזור שמתגלה רק במעבר עכבר על אלמנט אחר.
הקודים שבסרטון,
.my-toltip{
opacity: 0;
transition: 1s;
}
.my-hover:hover ~ .my-toltip{
opacity: 1;
transition: 2s;
}
ליצירת הצ’ופצ’יק הקטן,
.my-toltip:before{
content: "";
position: absolute;
bottom: -40px;
right: 25px;
width: 0;
height: 0;
border-left: 25px solid transparent;
border-right: 25px solid transparent;
border-top: 40px solid black;
}
תגובה אחת
תודה על הסרטון, עזר לי מאוד!
יש אפשרות להגדיר שהטולטיפ אחרי שהופיע (במעבר עכבר) ישאר קבוע והאיקון יעלם?