显示不适用于滑块的单选按钮

Question

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" 等等，但是 input#slide1show:checked h1.slide1 { display: inline; } 不起作用。希望有人知道问题出在哪里。

Answer 1

这是我找到的最简单的方法来实现您正在寻找的，但结构略有不同。这里的 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>

Answer 2

您的结构应该是 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>

显示不适用于滑块的单选按钮

Display doesn't work with radio button for slider

html

css

slider

radio

display