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

【问题标题】：Display doesn't work with radio button for slider显示不适用于滑块的单选按钮
【发布时间】：2020-05-04 14:26:14
【问题描述】：

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; } 不起作用。希望有人知道问题出在哪里。

【问题讨论】：

你的问题是什么
你能解释一下你所说的“出现”是什么意思吗？出现不是动词
dictionary.cambridge.org/dictionary/english/appear
当我按下单选按钮 id="slide1show" 没有任何变化，并且 h1 class=slide1 仍然有 display:none 而不是 display:inline，如 input#slide1show:checked h1.slide1
@VadimRahmanov 出现了，出现了，出现了。 Appear 以原始形式用作动词是自中世纪以来没有人做过的事情

标签： html css slider display radio

【解决方案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>

【讨论】：

【解决方案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>

【讨论】：