@bottob

Почему :checked не работает?

(Решил сделать слайдер на html i css, но не работает :checked.В чем проблема?)

<>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="slider ">
        <div class="slides">
            <div class="input"> 
                <input type="radio" name="r" id="r1" checked>
                <input type="radio" name="r" id="r2">
                <input type="radio" name="r" id="r3">
                <input type="radio" name="r" id="r4">
            </div>
            <div class="label">
                <label for="r1" class="bar"></label>
                <label for="r2" class="bar"></label>
                <label for="r3" class="bar"></label>
                <label for="r4" class="bar"></label>
            </div>
            <div class="img">
                <div class="slid n1"><img src="img/1-1.jpg" alt=""></div>
                <div class="slid "><img src="img/unnamed (1).jpg" alt=""></div>
                <div class="slid "><img src="img/images.jpg" alt=""></div>
                <div class="slid "><img src="img/3dr-19.jpg" alt=""></div>
            </div>
        </div>
    </div>
</body>
</html>


{{CSS}}

*{
    padding: 0;
    margin: 0;
}

body{
    background-color: #0a1b2b;
}

.slider{
    box-shadow: 0 0 19px 0 white;
    border-radius: 10px;
    width: 1100px;
    height: 600px;
    overflow: hidden;
    border: 10px solid white;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.label{
    position: absolute;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
}

.bar{
    border-radius: 50%;
    margin-left: 10px;
    background-color: #ddd;
    opacity: 0.5;
    width: 15px;
    height: 15px;
    transition: all 0.4s;
    cursor: pointer;
}

.bar:hover{
    transform: scale(1.3);
    opacity: 1;
    box-shadow: 0 0 7px 3px white
}

input[type="radio"]{
    display: none;
    position: absolute;
}

.img{
    width: 500%;
    height: 100%;
    display: flex;
}

.slid img{
    width: 100%;
    height: 87%;
}

.slid{
    width: 20%;
}

#r1:checked ~ .n1{
    margin-left: 0;
}

#r2:checked ~ .n2{
    margin-left: -20%;
}

#r3:checked ~ .n3{
    margin-left: -40%;
}

#r4:checked ~ .n4{
    margin-left: -60%;
}
  • Вопрос задан
  • 69 просмотров
Решения вопроса 1
@LJ322
Потому что комбинатор ~ выбирает элементы, находящиеся на одном уровне вложенности с указанным элементом и с тем же родителем. А у вас элементы с классами .n принадлежат другому родителю.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы