مهدی
1 سال پیش توسط مهدی مطرح شد
6 پاسخ

انتخابگر های شناور css

سلام میخواستم بدونم انتخابگر شناوری وجود داره که وقتی کاربر یک المان رو مشاهده کرد مثلا از رنگ سبز به زرد تغییر پیدا کنه؟ مثل سلکتور hover


ثبت پرسش جدید
مهدی نظری
تخصص : توسعه دهنده Front End
@mahdi.nazari 1 سال پیش آپدیت شد
-1

سلام دوست من 🖐
امیدوارم حالت خوب و عالی باشی✨

بله، شما می‌تونی از CSS برای ایجاد این نوع تغییرات در واکنش به وقوع رویداد "visited" استفاده کنی. برای تغییر ویژگی‌های المان وقتی ماوس روی آن قرار می‌گیره، از پسوند ":hover" در تعریف سلکتور CSS استفاده می‌شه. به عنوان مثال:

HTML:


<html>
<head>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <p class="color-change">متنی که تغییر رنگ خواهد کرد.</p>
</body>
</html>

CSS (style.css):

.color-change {
    color: green; /* رنگ اولیه */
    transition: color 0.5s; /* انتقال تغییر رنگ با انیمیشن */
}

.color-change:visited{
    color: yellow; /* رنگ جدید در وضعیت hover */
}

در این مثال، وقتی ماوس روی متن قرار می‌گیره ، رنگ متن از سبز به زرد تغییر می‌کنه ویژگی "transition" نیز برای ایجاد انتقال نرم بین رنگها اضافه شده

شما می‌تونی ویژگی‌های دیگری مانند پس‌زمینه (background)، حاشیه (margin)، اندازه (size) و ... را نیز با استفاده از تکنیک همانند تغییر رنگ تنظیم کنی

امیدوارم پاسخم بهت کمک کرده باشه ❤️
موفق و پیروز باشی 🤘🌹

</body></html>


مهدی
تخصص : برنامه نویس
@askari.mahdi 1 سال پیش مطرح شد
0

این سلکتور را استفاده میکنم ولی هیچ اتفاقی نمیوفته


مهدی نظری
تخصص : توسعه دهنده Front End
@mahdi.nazari 1 سال پیش مطرح شد
0

از کدهات عکس بزار لطفا ممنون


مهدی
تخصص : برنامه نویس
@askari.mahdi 1 سال پیش مطرح شد
0

همین کدی هم که دادی هیچ فرقی نکرد رنگ ش عوض نشد


ابوالفضل زارعی
تخصص : سئو
@abolfazlzarei 1 سال پیش مطرح شد
0

برای اکتیو ، هاور هم همون سی آس آس را بزن درست میشه فقط برای visit زده شده کدها


ابوالفضل نصیبی
تخصص : front end
@abol.p 1 سال پیش مطرح شد
0

سلام

a:hover {
background-color : red ;
}

hover برای وقتی هست که موس روی المنت بره

a:focus{
    background-color: yellow;
}

focus برای وقتی هست که کلیکه موس پایین هست یعنی اون چند لحظه ای که کلیکه موس رو فشار میدی که مثلا دکمه فعال بشه
و

a:visited{
    background-color: blue;
}

و visited هم برای زمانی هست که یکبار بر روی اون لینک یا المنت کلیک شده
مثلا توی گوگل کروم وقتی یک سایت رو ویزیت کرده باشی قبلا رنگ لینکش کمی آبی تر میشه
موفق باشید


برای ارسال پاسخ لازم است وارد شده یا ثبت‌نام کنید

ورود یا ثبت‌نام