انتخابگر های شناور css
سلام میخواستم بدونم انتخابگر شناوری وجود داره که وقتی کاربر یک المان رو مشاهده کرد مثلا از رنگ سبز به زرد تغییر پیدا کنه؟ مثل سلکتور hover
پاسخ‌ها
6
سلام دوست من 🖐
امیدوارم حالت خوب و عالی باشی✨
بله، شما می‌تونی از CSS برای ایجاد این نوع تغییرات در واکنش به وقوع رویداد "visited" استفاده کنی. برای تغییر ویژگی‌های المان وقتی ماوس روی آن قرار می‌گیره، از پسوند ":hover" در تعریف سلکتور CSS استفاده میشه. به عنوان مثال:
HTML:
<html>
<head>
<link rel="stylesheet" type="text/css" href="https://roocket.ir/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>
این سلکتور را استفاده میکنم ولی هیچ اتفاقی نمیوفته
گفتگوهای مرتبط
شاید پاسخ شما همین‌جا باشد
از کدهات عکس بزار لطفا ممنون
همین کدی هم که دادی هیچ فرقی نکرد رنگ ش عوض نشد
برای اکتیو ، هاور هم همون سی آس آس را بزن درست میشه فقط برای visit زده شده کدها
سلام
a:hover {
background-color : red ;
}hover برای وقتی هست که موس روی المنت بره
a:focus{
background-color: yellow;
}focus برای وقتی هست که کلیکه موس پایین هست یعنی اون چند لحظه ای که کلیکه موس رو فشار میدی که مثلا دکمه فعال بشه
و
a:visited{
background-color: blue;
}و visited هم برای زمانی هست که یکبار بر روی اون لینک یا المنت کلیک شده
مثلا توی گوگل کروم وقتی یک سایت رو ویزیت کرده باشی قبلا رنگ لینکش کمی آبی تر میشه
موفق باشید