Question

我有两个div，并排。当我单击div 2中的链接时，我需要使用outer-div 1来隐藏。我需要这个没有javascript工作。我以前做过，但相同的代码不再有用。

我使用以下代码：

<a href="#" name="trigger">Click Me</a>
<hr />
<div class="foo"></div>
<div class="bar"></div>

div {
    height: 200px;
    width: 200px;
    float: left;
}

.foo {
    background: red;
}

.bar {
    background: blue;
}

a:active ~ .foo {
    display: none;
}

jsfiddle

在单击另一个div中的链接时隐藏div。它曾经工作但不再有效。为什么这不再起作用了？

我正在使用Chrome（最新稳定版）和IE 11。

Answer 1

您可以用于点击的唯一操作是：但是，这仅适用于mousedown。当您释放单击时，它将恢复正常。你为什么不能使用javascript？在这种情况下，这将是最佳的。

然后你可以将一个不透明度为0的类切换到div。

.one {
        background: white;
        width: 50px;
        height: 50px;
    }
    .one:hover {
        height: 100px;
    }
    .two {
        position:absolute;
        top: 50px;
        background:white;
        width:50px;
        height:50px;
    }
    .two:hover {
        top: 0;
        height:100px;
    }
    .one:hover + .two {
        z-index: -1; 
    }

Answer 2

不使用javascript的另一种方法是：

HTML：

<div class="collapse" tabindex="1">
     <h2 >Collapse 1 +</h2>
     <p>Content 1....</p>
  </div>

    <div class="collapse" tabindex="1">
     <h2 >Collapse 2 +</h2>
     <p>Content 2....</p>
  </div>

CSS：

.collapse > * + *{
  display:none;
}
.collapse > *{
  cursor:pointer;
}
.collapse:focus{
  outline:none;
}
.collapse:focus > * + *{
  display:block; 
}

看看这是否有帮助。 See demo

Answer 3

也许是这样的，使用:target选择器。

HTML

<a href="#bar" name="trigger">Click Me</a>
<hr />
<div id="foo"></div>
<div id="bar"></div>

CSS

div {
    height: 200px;
    width: 200px;
    float: left;
}

#foo {
    background: red;
}

#bar {
    background: blue;
}

:target {
 display: none;
}

DEMO：http://jsfiddle.net/826CU/7/

Answer 4

  #foo {
    display:none;
  }
  #foo:target {
    display:block;
  }


<a href="#foo">Click</a>
<div id="foo">to display me</div>

伪类：target用于设置包含片段标识符的URI的目标元素的样式。

单击链接时隐藏div

4 个答案: