Question

我有一点问题，我不想在点击时切换div，只使用HTML5和CSS3，而不是JS或jQuery，只需HTML5 CSS3。

点击红色区域时，我不想在下面显示文字。这是我试图解决的问题，我设置：目标但不工作，也：焦点不工作。

HTML

<div class="click-me">
   <div class="over">
      Lorem ipsum dolor sit amet
   </div>
</div>

CSS

.click-me{
  position:relative;
  width: 100px;
  height:60px;
  background-color:red;
  cursor:pointer;
}
.over{
  display:none;
  position:absolute;
  bottom:-50px;
  left:0px;
}
.click-me:target .over{
  display:block;
}

https://jsfiddle.net/53g22ocs/

Answer 1

您与css最接近（至少我知道）的是使用:active选择器。

请参阅此JSFiddle

然而，不要害怕一些超级简单的VanillaJS，虽然我的拙见认为JQuery对于这个很有害。

希望这会有所帮助，欢呼。

附加信息：

所以我刚刚提供了最初的例子......

如果你愿意，你可以将checkbox设为LOOK，就像button一样，然后你就可以与:checked选择器联系起来。

喜欢这个CodePen

我认为你试图用你在那里完成它来实现它，但我得到的印象是你只想要一个没有任何js的纯html / css的方法。

PS，sass仍然编译到最后只有CSS的amigo。 ;）

希望这有帮助。

Answer 2

使用隐藏的复选框可以实现此目的。这是一个有效的例子：

https://jsfiddle.net/cf1ht61w/

基本上，屏幕外有一个隐藏的复选框，以及与之关联的标签，可以覆盖您的可点击框。单击该框时，实际上是单击标签，该标签检查复选框并更改兄弟元素的css。

.click-me{
  position:relative;
  width: 100px;
  height:60px;
  background-color:red;
  cursor:pointer;
}
.over{
  display:none;
  position:absolute;
  bottom:-50px;
  left:0px;
}

#toggleBox  {
position: absolute;
z-index: -1;
left: -1000000000px;
top: 1000000000px;
visibility: hidden;
height: 0;
width: 0;
}
#toggleLabel{
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
}

#toggleBox:checked + .over{
  display:block;
}

<div class="click-me">
<label for="toggleBox" id="toggleLabel"></label>
<input type="checkbox" id="toggleBox">
   <div class="over">
      Lorem ipsum dolor sit amet
   </div>
</div>

Answer 3

CSS3中没有点击事件。虽然您可以通过输入复选框检查完成它..但您需要使用jQuery单击事件。

Answer 4

如果可以使用<a>标记来定位div，则可以这样做。

.tab div {
  display: none;
}

.tab div:target {
  display: block;
}

<div class="tab">
  <a href="#link1">Click Me</a>

  <div id="link1">
    <h3>Content</h3>
    <p>
      Put stuff here.
    </p>
  </div>
</div>

修改我想我误解了这个问题。请尝试以下。

body { margin: 1em; } #check-button { display: none; } #link1 { margin-top: 10px; background-color: red; } #check-button:checked + #button + #link1 { display: none; } #button { background-color: yellow; display: inline-block; padding: 2px 5px; cursor: pointer; }

<input type="checkbox" id="check-button"> <label id="button" for="check-button">Click Here</label> <div id="link1"> <h3>Content</h3> <p>Put stuff here.</p> </div>

Answer 5

这是我的简单尝试......

.click-me{
  position:relative;
  width: 50px;
  height:60px;
  background-color:red;
  cursor:pointer;
}
 .div {position:fixed;
  width: 100px;
  height:60px;
  background-color:red;
  cursor:pointer;
  text-align:right;
  }
.over{
  display:none;
  position:absolute;
  bottom:-120px;
  left:0px;
  background: blue;
  color: white;
  font-size:15px; 
}
.click-me:focus .over{
  display:block;
}

<button class="div">hide
<button class="click-me">show
   <div class="over">
      This is done with Html and Css!!!
      Now,Click hide to hide me!!!
   </div>
</button>

当“显示”按钮聚焦时，文本显示，点击隐藏按钮后，“显示”按钮失去焦点并隐藏文字。

为什么我不能切换div

5 个答案: