روشن شدن این دایره ها [بایگانی]

maha19

یک شنبه 18 تیر 1396, 19:36 عصر

سلام من 4 تا باکس دایره ای دارم
میخوام روی هر دایره که رفتم نقطه های دایره های از اول تا خودش روشن بشه.
مثلا روی دایره دوم که رفتم نقطه های ریز قبل خودش رنگش تغییر کنه روی دایره سوم
که رفتم همه نقطه های ما قبل خودش روشن بشه باید چکار کنم اینطور بشه؟
برای درست کردن مراحل میخوام
تصویر (https://s.7learn.com/uploads/2017/07/circle-128x72.png)

anvar

پنج شنبه 29 تیر 1396, 11:43 صبح

شما به هر باکس خاصیت position:releative بده و با استفاده از شبه کلاس های after و before می تونید قبل از این باکس ها یا بعد از اونها محتوی مورد نظر خودتون (در اینجا همین نقاط) رو قرار بدید.

کد زیر رو در یک فایل html ذخیره و سپس بررسی کن - فقط جنبه آموزشی داره

<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<style>
.maincontainer
{
margin: 0 auto;padding: 20px;
}
.maincontainer > div
{
display: inline-block;
padding: 20px;
width: 10%;
background-color: #F1F1F1;
border: 1px solid #CC3333;
margin-left: 100px;
min-height: 100px;
border-radius: 50%;
text-align: center;
vertical-align: middle;
position: relative;
line-height: 100px;
}
.maincontainer > div:before
{
content: '----*----';
color: #F1F1F1;
position: absolute;
left: -100px;
top: 15%;
font-size: 30px;
font-weight: 700;
}
.maincontainer > div:first-child:before
{
content: none;
}
.maincontainer > div:hover:before
{
color: #CC3333;
}
</style>
</head>
<body>
<div class="maincontainer">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</body>
</html>

برای اطلاعاتات بیشتر در مورد شبه کلاس ها با لینک های زیر مراجعه کنید

https://www.w3schools.com/css/css_pseudo_elements.asp

https://css-tricks.com/almanac/selectors/a/after-and-before/