Дисплей не работает с переключателем для слайдера - PullRequest
Новая
       9

Дисплей не работает с переключателем для слайдера

1 голос
/ 17 января 2020 

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;
}
<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>

Я хотел бы сделать так, чтобы при нажатии радиокнопки id="slide1show" показывалось h1 class=slide1, когда при нажатии радиокнопки id="slide2show" показывалось h1 class="slide2" и др. c, но input#slide1show:checked h1.slide1 { display: inline; } не работает. Надеюсь, кто-нибудь знает, в чем проблема.

Ответы [ 2 ]

2 голосов
/ 17 января 2020

Ваша структура должна быть input и тег h1, как показано ниже

~ называется общим селектором брата 

div.slider-container {
  position: relative;
  border: 1px solid red;
  text-align: center;
  padding-top: 150px;
  padding-bottom: 10px;
}

div.slider-container h1 {
  position: absolute;
  top: 0;
  opacity: 0;
  transition: .5s linear;
  left: 0;
  right: 0;
  padding: 20px;
}

input#slide1show:checked ~ h1.slide1 {
  opacity: 1;
}

input#slide2show:checked ~ h1.slide2 {
  opacity: 1;
}

input#slide3show:checked ~ h1.slide3 {
  opacity: 1;
}
<div class="slider">
  <div class="slider-container">
    <input id="slide1show" checked type="radio" name="slide">
    <input id="slide2show" type="radio" name="slide">
    <input id="slide3show" type="radio" name="slide">
    <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>
</div>
2 голосов
/ 17 января 2020

Вот самый простой способ найти то, что вы ищете, но с немного другой структурой. Здесь h1 находится близко к входу, поэтому легче редактировать каждый элемент.

Я также добавил переход непрозрачности, чтобы проиллюстрировать, как добиться некоторых эффектов анимации с помощью CSS. 

.slider {
  text-align: center;
}

.slider h1 {
  display: inline;
  position: absolute;
  top: 1em;
  left: 0;
  width: 100%;
  opacity: 0;
  transition: opacity 0.6s;
}

.slider input {
  display: inline;
  position: relative;
  top: 10em;
}

.slider input:checked + h1 {
  opacity: 1;
}
<div class="slider">

  <input type="radio" name="slide" checked>
  <h1>Your Beauty Starts Here</h1>

  <input type="radio" name="slide">
  <h1>We Serve You for All Your Beauty Needs</h1>

  <input type="radio" name="slide">
  <h1>It’s Time to Relax & Take Care of Yourself</h1>

</div>
...