سلام من 4 تا باکس دایره ای دارم
میخوام روی هر دایره که رفتم نقطه های دایره های از اول تا خودش روشن بشه.
مثلا روی دایره دوم که رفتم نقطه های ریز قبل خودش رنگش تغییر کنه روی دایره سوم
که رفتم همه نقطه های ما قبل خودش روشن بشه باید چکار کنم اینطور بشه؟
برای درست کردن مراحل میخوام
تصویر
شما به هر باکس خاصیت 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/selec...er-and-before/
قوانین ایجاد تاپیک در تالار
پاسخ با نقل قول