جلسه ۳۰ – حالت های ممکن برای لینک ها (hover, active, …)

زمانی که از حالت های ممکن برای لینک ها صحبت می‌کنیم، دقیقا منظورمون چیه؟ منظور از Hover چیست؟ منظور از Active چیست؟ منظور از link چیست و منظور از visited چیست؟ در این مقاله به صورت کامل می‌خواهیم در رابطه با حالات ممکن در لینک ها با همدیگه صحبت کنیم.

لینک ها می‌تونن در ۵ حالت مختلف قرار داشته باشن:

• hover
• active
• link
• visited
• focus

حالا به تشریح این حالت ها می‌پردازیم. قبل از بررسی کامل این موارد، اگر هنوز نمی‌دونید که لینک چی هست؟ می‌تونید مقاله لینک چیست را در پایگاه دانش میزفا بخوانید.

حالت hover

دیدین وقتی تو یه سایت، نشانگر رو می‌بریم روی یه لینک یا گزینه، چه اتفاقی میفته؟

ممکنه اندازش بزرگ بشه، یا رنگش عوض بشه، یا کلا قیافش عوض بشه!

این اتفاق با دستور hover، امکان پذیره.

تغییر رنگ به وسیله hover

به ساختار کد زیر توجه کنین:

کد HTML:

<a href="#">Click here</a>

کد CSS:

a{
   color: red;
}

نتیجه:

حالا می‌خوایم یکاری کنیم که وقتی با نشانگر رفتیم روی این لینک، رنگش به سبز تغییر کنه. کافیه کد زیر رو به مجموعه کدهای CSS خودمون اضافه کنیم:

a:hover{
   color: green;
}

و مسلما زمانی که نشانگر رو روی لینک می‌بریم، نتیجه به شکل زیر تغییر می‌کنه:

یا مثلا یک مثال دیگه:

div{
background-color:red;
width:100px;
height:100px;
}
div:hover{
background-color:blue;
}

تغییر اندازه به وسیله hover

تنها توانایی این ویژگی، در تغییر رنگ نیست و می‌شه هر دستوری رو توسط hover، تغییر داد. اندازه لینک، فونت لینک، موقعیت لینک و …

به مثال زیر توجه کنین:

کد HTML:

<a href="#">Click here </a>

کد CSS:

a{
   color: green;
   font-size: 1em;
}

a:hover{
   color:red;
   font-size:2em;
}

نتیجه به فرم زیر تغییر می‌کنه:

حالت visited

این حالت، زمانی به وجود میاد که روی لینک مورد نظر ما کلیک می‌شه و ما به آدرسی که در کد لینک نوشته شده، وارد می‌شیم.

شاید تو گوگل هم دیده باشید، که اگه به سایت خاصی وارد شید، رنگ اون لینک از آبی به بنفش تغییر می‌کنه.

برای درک بهتر، به تصویر زیر توجه کنین:

درواقع، می‌تونیم بگیم به کمک حالت visited، می‌تونیم متوجه شیم که کدوم لینک ها رو بررسی و کدوم لینک ها رو بررسی نکردیم.

به کد زیر توجه کنین:

<a href="https://google.com"> Click here </a>

a{
   color: black;
   background-color: white;
}

a:visited{
   color: green;
   background-color: yellow;
}

در این مثال، ما لینک سیاه رنگی رو به وجود آوردیم که به google منتهی می‌شه. اگه روی لینک کلیک کنیم و وارد گوگل بشیم، اون لینک به رنگ سبز در اومده و رنگ پس زمینه مربوط به اون هم، زرد می‌شه.

به مثال زیر توجه کنین:

<a href="https://w3school.com">w3school.com</a>
<a href="https://mizfa.com">mizfa.com</a>
<a href="https://css-tricks.com">css-tricks.com</a>

a{
   font-size: 2em;
   margin: 20px;
}
a:visited{
   color:red;
}

بعد از نوشتن کد فوق، کافیه یکی از لینک ها رو به صورت دلخواه انتخاب کنیم. نتیجه به شکل زیر خواهد بود:

نکته: این حالت، زمانی که صفت ما به فرم “#”=href باشه، همیشه در حالت visited خواهد بود. چرا که علامت # به معنای برگشت به صفحه اولیه‌ای هست که لینک در اون قرار داره و بدین ترتیب، همیشه در حال visit کردن صفحه مورد نظر خواهیم بود.

حالت active

این حالت، تفاوت چندانی با حالت قبل، یعنی visited نداره. تنها تفاوتی که وجود داره، اینه که در صورت کلیک کردن روی لینک مورد نظر، تغییرات تا زمانی اعمال می‌شن که ما کلیک رو ادامه می‌دیم.

یعنی چی؟ به کد زیر توجه کنین تا بهتون بگم!

کد HTML:

<a href="#"> Click here </a>

کد CSS:

a{
   font-size: 3em;
   color:blue;
}

a:active{
   font-size: 40px;
   color:red;
}

یعنی یه لینک داریم با رنگ آبی و اندازه ۳۰ پیکسل. نشانگر رو می‌بریم روی اون، کلیک چپ می‌کنیم و انگشتمونو بالا نمیاریم!

تا زمانی که انگشتمونو بالا نیاوردیم و کلیک رو نگه داشتیم اندازه لینکمون می‌شه ۴۰ پیکسل و رنگش هم به قرمز تغییر می‌کنه.

بعد از اینکه کلیک رو ول کردیم، لینک موردنظر بلافاصله به حالت اولیه برمی‌گرده.

یا به یک مثال دیگه توجه کنین:

<div>

</div>

div{
   background-color: red;
   width:100px;
   height:100px;
}
div:active{
   background-color: blue;
}

اگه براتون ابهام و سوالی پیش اومد، حتما و حتما در قسمت نظرات بپرسین، من کمکتون می‌کنم 🙂

حالت link

این حالت، کاملا بر خلاف visited عمل می‌کنه و می‌تونه رو لینک هایی اثر بزاره که ویزیت نشدن یا ساده تر بگیم، باز نشدن.

همچنین یکی دیگه از ویژگی های مهم این حالت، اینه که فقط روی لینک های دارنده صفت href تاثیر داره.

حالت مورد نظر، به نسبت حالت های دیگه، کمتر استفاده می‌شه.

به مثال زیر توجه کنین:

کد HTML:

<a href="#"> Hello world </a>
<a href="google.com"> Google </a>
<a> Empty Link </a>

کد CSS:

a:link{
   color: red;
}

نتیجه:

همونطور که می‌بینیم، این حالت روی دو تگ اول، به علت دارا بودن صفت href تاثیر داشته، اما نتونسته از پس تگ سوم بربیاد.

حالت focus

هر لینکی می‌تونه در حالت فعال قرار بگیره. اما حالت فعال به چه معناست؟

حالت فعال، به حالتی اطلاق می‌شه که در اون، لینک آمادست تا هر گونه تعاملی باهاش انجام شه.

به کد زیر توجه کنین:

<a href="#">This is the focus link</a>

a:focus{
   color:red;
}

کافیه روی لینک مورد نظر کلیک کنیم تا به رنگ قرمز دربیاد، با این تفاوت که بعد از کلیک کردن بر هر جای دیگری از صفحه، اون لینک غیرفعال میشه و به حالت اول خودش برمی‌گرده.

حالت focus توسط عناصر HTML زیر مورد قبول واقع میشه:

• لینک ها (بدون href نمی‌تونیم از focus استفاده کنیم)
• input ها و textarea ها (نباید حاوی صفت disabled باشن)
• button ها (نباید حاوی صفت disabled باشن)

شبه کلاس focus کاربرد بسیار زیادی در استایل دادن به فرم ها و inputها داره که می‌تونین در مقاله استایل دهی به فرم ها بیشتر در موردشون مطالعه کنین.

ترتیب صحیح استفاده از شبه کلاس ها

بعضی اوقات مجبور هستیم که از این حالات به صورت ترکیبی استفاده کنیم.

ترکیباتی که می‌تونیم از این حالت ها بسازیم بی شماره، اما نکته ای که باید بهش توجه کنیم اینه که گاهی اوقات یک شبه کلاس از عمل کردن شبه کلاس دیگه جلوگیری می‌کنه.

بدین منظور عمومی ترین ترکیب شبه کلاس ها رو مورد بررسی قرار میدیم.

به کد زیر توجه کنین:

<a href="#">Click on me</a>

a:hover{
   color:red;
}

a:active{
   color:green;
}

a:focus{
   color:blue;
}

در کد بالا، با کلیک کردن روی لینک، hover و focus به خوبی انجام میشن، اما این بین active کار نمی‌کنه.

چه اتفاقی داره میفته؟

ما برای تعامل با یک لینک، اول نشانگر رو روی اون می‌بریم (hover)، سپس اون رو فعال می‌کنیم (focus) و در نهایت، شبه کلاس active اتفاق میفته.

ساده و مطمئن بگم، از ترتیب زیر استفاده کنین:

a:hover{
   color:red;
}

a:focus{
   color:blue;
}

a:active{
   color:green;
}

نکته: هرموقع از شبه کلاس های link و visited هم استفاده می‌کردین، مجددا از همین ترتیب استفاده کنین، و اون ها رو قبل از hover ذکر کنین.

دید کلی تر

مفاهیمی که توی این مقاله یاد گرفتیم، بخشی از یک مفهوم کلی تر در CSS به نام “شبه کلاس ها” یا pseudo classes هستن.

این مفهوم کلی تر، شامل چهار بخش اصلی به شرح زیره:

• شبه کلاس های لینک محور
• شبه کلاس های input
• شبه کلاس های موقعیت محور
• شبه کلاس های ارتباطی

بخش اول این مفهوم، یعنی شبه کلاس های لینک محور رو در همین مقاله یاد گرفتیم. ادامه یادگیری سه بخش دیگه رو به فصل ۲۲ مجموعه آموزش های CSS میزفا موکول می‌کنیم 🙂

پایان ترم

سوال:

عنصری به شکل زیر طراحی کردیم:

کد HTML و CSS اون به فرم زیره:

<a href="#">
   Register
</a>

a{
   padding:20px;
   background-color:white;
   font-weight: bolder;
   color:green;
   border: 5px solid green;
   border-radius:10px;
   text-decoration: none;
   display: inline-block;
}

کد CSS ای به اون اضافه کنین که با بردن نشانگر روی اون، رنگ حاشیه ها به عنوان رنگ پیش زمینه تنظیم شه.

همچنین، زمانی که روی اون کلیک می‌شه، دارای ابعاد کوچیک تری می‌شه و بعد از کلیک شدن، به حالت اول برمی‌گرده.

کدتون رو در قسمت نظرات، تو فایلی با نام “پاسخ کوییز مقاله ۳۰” آپلود کنین.

نکته: نگران دستور display:inline-block نباشین، این دستور نقشی در پاسخ پایان ترم نداره و برای اصلاح مکان قرار گیری عنصر به کار رفته. این دستور رو در مقاله خاصیت display در CSS میزفا با هم یاد می‌گیریم.

به ایمیل کسانی که پاسخ درست و کامل رو در نظرات بگن ۱۰ هزارتومان در پنل کاربری آکادمی میزفا حسابشون شارژ میشه. (البته باید در آکادمی میزفا ثبت‌نام کنید تا بتونید از این امتیاز استفاده کنید.)

نتیجه گیری

تو این مقاله آموزشcss ، با چهار حالت متفاوت برای لینک هامون آشنا شدیم.

• hover: تغییر استایل لینک در زمانی که نشانگر بر روی اونه.
• active: تغییر استایل لینک در زمانی که تحت کلیکه.
• visited: تغییر استایل لینک در زمانی که مورد استفاده قرار گرفته (کاربر به اون وارد شده).
• link: تغییر استایل لینک های حاوی صفت href
• focus: تغییر استایل لینک ها در حالت فعال

اگه نکته، پیشنهاد و انتقادی در رابطه با آموزش‌ها دارین، خیلی خیلی خوشحال می‌شیم که اون رو در بخش دیدگاه‌های پایگاه دانش میزفا ارسال کنین.

مدیر محتوا: علی اسمعیلی