Question

我已经查看了几个不同的问题，帮助我达到这一点，但我无法找出允许我到外面DIV的选择器。

如果我删除了两个包含DIV的代码，则代码可以正常工作，但是对于格式化，我需要div来控制外观。任何帮助都有效我知道~是子选择器，这就是没有DIV的原因。

如何选择任何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类的项目放在与div相同的option容器中。请检查此article。

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

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() - < strong> $（this） 指的是点击的元素

（2）我演示了同时使用.show() - 与css display:block，和实际上使用css语句本身相同。

坦率地说，我认为使用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可见

2 个答案: