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

استایل دهی در حالت های مختلف لینک

حالات ممکن در لینک ها
حالات ممکن در لینک ها

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

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

  • hover
  • active
  • link
  • visited
  • focus

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

حالت hover

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

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

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

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

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

کد HTML:

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

کد CSS:

a{
   color: red;
}

نتیجه:

لینک قبل از حالت hover

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

a:hover{
   color: green;
}

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

لینک بعد از حالت hover

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

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

مثال دوم hover

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

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

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

کد HTML:

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

کد CSS:

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

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

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

تغییر اندازه و رنگ عنصر، قبل و بعد از hover

حالت visited

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

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

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

حالت visited در google

درواقع، می‌تونیم بگیم به کمک حالت 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;
}

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

مثال دوم visited

نکته: این حالت، زمانی که صفت ما به فرم “#”=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;
}

مثال دوم active

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

حالت link

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

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

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

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

کد HTML:

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

کد CSS:

a:link{
   color: red;
}

نتیجه:

حالت link

همونطور که می‌بینیم، این حالت روی دو تگ اول، به علت دارا بودن صفت 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 میزفا موکول می‌کنیم 🙂

پایان ترم

[box type=”info” class=”question-from-users” width=””]

سوال:

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

کوییز مقاله ۳۰

کد 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 میزفا با هم یاد می‌گیریم.

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

[/box]

نتیجه گیری

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

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

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

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

فیلم آموزشی asp.net core 2

نوید معدن نژاد
یک عدد دانشجوی مهندسی مکانیک، که راه رسیدن به رویاهاش رو تو علوم کامپیوتری پیدا می‌کنه و سعی می‌کنه هیچوقت از یادگیری دست نکشه!
آموزش CSS
پایین سرفصل های CSS هست، روی منم کلیک کنی میتونی ببینی.

فیلم آموزشی asp.net core 2

13 نظر

13 پاسخ

  1. سلام وقتتون بخیر میخام یک لیستی رو هاور کنم
    وقتی روی هر عنصر لیست موس رو آوردم تغییر رنگ پیدا کنه مرسی

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

  2. درود، من یه دیو ساختم داخلشم یه ul و میخام کاری کنم که وقتی اون دیو هاور شد اون یو ال نمایش داده بشه و قبله هاور کردن یو ال معلوم نباشه، چجوری میشه تویه div:hover کاری کرد که ul نمایش داده شه؟؟

    1. سلام علیرضا. ببین برای انجام این کار راه های زیادی هست، میتونی مثلا دستور opacity: 0 رو روی ul تعیین کنی و بعد از کد زیر استفاده کنی:

      div:hover ul{
           opacity: 1;
      }

      که میگه هروقت نشانگر روی div رفت، شفافیت ul رو صد درصد کن. از خاصیت display هم میتونی استفاده کنی اما تحت یک سری شرایط خاص تر. اگه تنها عنصر فرزند div، همون ul باشه، باید براش height تعیین کنی که اگر ul غیب شد div ارتفاعش صفر نشه و این قضیه برات مشکل ایجاد نکنه.

  3. درود: من یه عکس تو تگ لینگ اماده کردم و هاور هم برای عکس گذاشتم ولی یه جاشو بلد نبودم ، اینکه چجوری بتونیم متن نوشته ای روی هاور بزاریم🤔

    1. ممنون حسین پاسخت درسته. انتظار داشتم از padding برای سایز دکمه استفاده کنی ولی همینکه از font-weight و border-width استفاده کردی کار جالبیه🙂

  4. سلام امیدوارم درست باشه فقط من یه بک گراند به صفحه دادم که ولی میخواد هاور بشه بردرش مشخص باشه که سفید میشه و یه ترنزیشن هم برای زیبایی بهش دادم که البته ضرورتی نداشت.
    body {
    background-color: #cacaca;
    }
    a{
    padding:20px;
    background-color:white;
    font-weight: bolder;
    color:green;
    border: 5px solid green;
    border-radius:10px;
    text-decoration: none;
    display: inline-block;
    }
    a:hover {
    background-color: green;
    color: #fff;
    border: 5px solid #fff;
    transition: .2s ease-in;
    }
    a:active {
    padding: 5px;
    transition: .3s ease-in;
    }

    1. سلام متين. خيلي ممنون ازت پاسخت كاملا درسته. در مورد بك گراند هم ايرادي نداره كار درستي كردي 😊

  5. سلام وقت بخیر
    ویژگی a:link رو من چند بار امتحان کردم اجرا نشد! بجای این کدهای CSS ویژگی a:visited اجرا میشن! این مشکل از چی میتونه باشه؟

    1. سلام
      حتما اشتباه تشخیص دادی. وقتی لینک کلیک نکنی a:link رنگش هست مگر کلیک کنی و رنگش بره

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

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

حداکثر حجم فایل برای آپلود: 1 مگابایت. فایل‌های مجاز برای آپلود: عکس, ویس, ویدیو, ورد یا پی دی اف, فایل متنی, زیپ. شما می‌تونید برای بهتر پرسیدن سوالتون، عکس یا ویس یا حتی فیلم در بخش نظرات میزفا آپلود کنید. برای ضبط ویس می‌تونید از خود واتس آپ استفاده کنید و بعد اینجا آپلود کنید و برای ارسال عکس هم کافی هست اسکرین شات بگیرید. Drop file here

با موفقیت ثبت شد، میزفا از شما برای عضویت در خبرنامه هفتگی تشکر میکند.

عضویت در خبرنامه هفتگی برای دریافت:

  • فیلم و مقاله رایگان سئو
  • آموزش‌های UX ، GA و GTM
  • مقاله های تخصصی ASP.NET Core
  • اطلاع رسانی از محصولات
فیلم آموزشی asp.net core 2
ترک میزفا خوب نیست!
دوره سئو، رایگان شد.
فرصتی رایگان برای یادگیری
کاراکتر اشاره گر
دوره سئو، رایگان شد.
فرصتی رایگان برای یادگیری
کاراکتر اشاره گر