آموزش pseudo classes در CSS
در سایت ها میبینید در حین بردن موس بر روی اجزای صفحه وب سایت تغییراتی اعمال میشود. برای مثال رنگ تغییر میکند یا محو تر میشود یا بزرگ.
برای این کار نمونه کدی را به حالت زیر بنویسید.
<!DOCTYPE html>
<html>
<head>
<title>lesson 5</title>
<link rel="stylesheet" type="text/css" href="lesson5.css">
</head>
<body>
<p>1-farkiantech => info@farkiantech.com</p>
<p>i am a student</p>
<div>
<p>p in div</p>
<div>
<span>
<p>p in 2 div <a href="">click here</a></p>
</span>
</div>
</div>
<a href="">click here</a>
</body>
</html>
div p{
color: #ffffff;
font-size: 200%;
background-color: rgba(100,0,0,0.5);
}
div p a{
color: white;
}
a{
color: pink;
}
برای اینکه دستور دهیم هر divی که موس بر روی آن رفت، تنظیماتی اعمال شود. برای اینکار مینویسیم div:hover{ }
div p{
color: #ffffff;
font-size: 200%;
background-color: rgba(100,0,0,0.5);
}
div p a{
color: white;
}
a{
color: pink;
}
div:hover{
background-color: yellow;
}
همچنین میتوانیم بر روی تگ آخر a تغییراتی اعمال کنیم.
در اول لینک به رنگ زرد تبدیل می شود، اگر بر روی لینک click کرده باشد.
a:visited{
color: yellow;
}
اگر فقط موس را روی لینک ببرید بدون انجام click لینک به رنگ قرمز میشود.
a:hover{
color: red;
}
و اگر میخواهید با موس روی لینک به حالت کلیک نگه دارید به رنگ سبز میشود.
a:active{
color: green;
}
برای دیدن آموزش های بیشتر جزوات CSS را دنبال کنید.
