flander
@flander
Начинающий веб-разработчик

Почему не работает display на радио-кнопке по селектору :checked?

<div class="slider">
            <div class="slider-container">
                <h1 class="slide1">It’s Time to Relax & Take Care of  Yourself</h1>
                <h1 class="slide2">We Serve You for All Your Beauty Needs</h1>
                <h1 class="slide3">Your Beauty Starts Here</h1>
                <div class="radioslide">
                <input id="slide1show" type="radio" name="slide">
                <input id="slide2show" type="radio" name="slide">
                <input id="slide3show" type="radio" name="slide">
                </div>
                </div>


div.slider-container {
    position: relative;
}

div.radioslide {
    display: inline;
    position: absolute;
    right: 20em;
    top: 20em;
}

h1.slide1 {
    position: absolute;
    right: 2em;
    top: 7em;
    display: none;
}

h1.slide2 {
    position: absolute;
    right: 2em;
    top: 7em;
    display: none;
}

h1.slide3 {
    position: absolute;
    right: 2em;
    top: 7em;
    display: none;
}

input#slide1show:checked h1.slide1 {
    display: inline;
}


Проблема такова, нужно сделать так, чтобы при выборе радио-кнопки отображался display, то есть когда input#slide1show выбран, то становится видимым контент h1.slide1 и так со всеми.
  • Вопрос задан
  • 37 просмотров
Решения вопроса 1
joeberetta
@joeberetta
Читай: https://epdf.pub/google-for-dummies.html

Почему не работает display на радио-кнопке по селектору :checked?

Потому что селектор неверный.
С вашей разметкой не получится добиться желаемого без js. Ибо вы хотите достучаться до элемента, который по факту находится выше чем целевой элемент.
А ваш нынешний селектор ишет вложенный в инпут заголовок(т.е. дочерний), а его как видим нет там, и не может быть
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
@Asokr
С такой версткой - только js.
Если css, нужно поменять верстку и подправить css
Ответ написан
Ваш ответ на вопрос

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

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