选中选项时使 div 可见

Question

我已经查看了几个不同的问题来帮助我达到这一点，但是我无法弄清楚 select 或者让我到达外面的 DIV。

如果我删除两个包含的 DIV，代码将完美运行，但是对于格式化，我需要 div 来控制外观。任何帮助都会起作用我知道 ~ 是 child select 或者这就是它在没有 DIV 的情况下工作的原因。

我如何select任何DIV？

代码：

.reveal-if-active {
  color: #ccc;
  font-style: italic;
  opacity: 0;
  transform: scale(0.8);
  max-height: 0px;
  transition: 0.5s;

}

input#photo1:checked ~ div#portraits,

input#photo2:checked ~ div#wedding,

input#photo3:checked ~ div#other {

  color: #f00;
  font-style: normal;
  transform: scale(1);
  opacity: 1;
  max-height: 150px;
}

<html>

<head>
  <meta charset="utf-8">
  <title>Untitled Document</title>

</head>

<body>
  <form>
    <div class="eight columns" data-scroll-reveal="enter bottom move 100px over 0.6s after 0.2s">
      <label for="photo">
        <span class="error" id="err-phone">Please Select What you are looking for?</span>
      </label>
      <input class="radio_activator_portraits" name="photo" id="photo1" type="radio" value="portraits">
      <label for="photo1">Portraits</label>
      <input class="radio_activator_weddings" name="photo" id="photo2" type="radio" value="wedding">
      <label for="photo2">Wedding</label>
      <input class="radio_activator_other" name="photo" id="photo3" type="radio" value="other">
      <label for="photo3">other</label>
    </div>
    <div class="eight columns reveal-if-active" id="portraits" name="portraits">Portraits</div>
    <div class="eight columns reveal-if-active" id="wedding" name="wedding">Wedding</div>
    <div class="eight columns reveal-if-active" id="other" name="other">Other</div>
  </form>
</body>

</html>

Answer 1

我认为您还不能仅使用 CSS 根据后代设置父级样式，您可以考虑使用 Javascript 或 jQuery。看看这个链接： Parent Selectors in CSS, Is there a CSS parent selector?

试试这个 HTML 结构：

<body>
  <form>
    <div class="eight columns" data-scroll-reveal="enter bottom move 100px over 0.6s after 0.2s">
      <label for="photo">
        <span class="error" id="err-phone">Please Select What you are looking for?</span>
      </label>
      <input class="radio_activator_portraits" name="photo" id="photo1" type="radio" value="portraits">
      <label for="photo1">Portraits</label>
      <input class="radio_activator_weddings" name="photo" id="photo2" type="radio" value="wedding">
      <label for="photo2">Wedding</label>
      <input class="radio_activator_other" name="photo" id="photo3" type="radio" value="other">
      <label for="photo3">other</label>

      <div class="eight columns reveal-if-active" id="portraits" name="portraits">Portraits</div>
      <div class="eight columns reveal-if-active" id="wedding" name="wedding">Wedding</div>
      <div class="eight columns reveal-if-active" id="other" name="other">Other</div>

    </div>
  </form>
</body>

为了使其正常工作，您需要将具有 reveal-if-active class 的项目与 option 放在同一个 div 容器中。检查这个 article.

要将它们定位在父 <div> 之外，请在 .reveal-if-active class 上使用定位：

position:absolute;
top: 40px;

参见Example。

Answer 2

cchacholiades 是正确的——您将需要 javascript 来做您想做的事。 +1

On a CSS hover event, can I change another div's styling?

但是，javascript 您想要的东西非常简单——它看起来像这样：

$(document).ready(function(){
    $('input[name="photo"]').click(function(){
        var phot = $(this).val();
        $('#'+phot).show().css({'background':'yellow','opacity':'1'});
    });
});

jsFiddle Demo

备注：

(1) 因为您已经将所需 DIV 的 ID 存储为单击的单选按钮的 value，所以捕获该值很简单：$(this).val() -- $(this) 指的是被点击的元素

(2) 我演示了同时使用 .show()——这与实际使用 css、display:block、和相同57=] 语句本身。

坦率地说，我认为您使用 jQuery 来执行此操作会更快。唯一需要注意的是您必须加载 jQuery 库，通常在 <head> 标签中，如下所示：

<head>
    <!-- other stuff in head -->
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>

如果您想快速学习 jQuery，请在此处查找免费视频教程：

https://www.thenewboston.com/videos.php?cat=32

或

http://phpacademy.org

选中选项时使 div 可见

Make div visible when option is checked

css

css-selectors