1

我只想在单击另一个 div 时使用 CSS 来显示一个 div

这是我的 HTML 代码

<div id="contentmenu">
                <div class="show">
                    <a class="show">
                        My Student
                    </a>
                </div>
                <div class="hidden">
                        <a href="#">Link 1</a><br/>
                        <a href="#">Link 2</a><br/>
                        <a href="#">Link 3</a><br/>
                </div>
</div>

我的 CSS 代码是

#contentmenu{
    margin-top: 79px;
    background-color: #E9D4B5;
    width: 25%;
    height: 100%;
}
.show{
    margin-top: 2%;
    background-color: #CE9127;
    width: 96%;
    height: 10%;
    padding-left: 4%;
    color: white;
    text-decoration: none;
}
.hidden{
    display: none;
    padding-left: 8%;
    margin-top: 1%;
}

那么如何在仅使用CSS单击div（class = show）时显示div（class = hidden）

4

2 回答 2

4

您可以使用Checkbox Hack来做到这一点，但请确保确保浏览器支持足够。它看起来像这样：

#contentmenu{
    margin-top: 79px;
    background-color: #E9D4B5;
    width: 25%;
    height: 100%;
}
.show{
    margin-top: 2%;
    background-color: #CE9127;
    width: 96%;
    height: 10%;
    padding-left: 4%;
    color: white;
    text-decoration: none;
    display: block;
}
.hidden{
    display: none;
    padding-left: 8%;
    margin-top: 1%;
}
input[type=checkbox] {
   position: absolute;
   top: -9999px;
   left: -9999px;
}
input[type=checkbox]:checked ~ .hidden {
   display: block;
}

使用此 HTML：

<div id="contentmenu">
    <label for="toggle-1"><a class="show">
      My Student
      </a></label>
<input type="checkbox" id="toggle-1">
  <div class="hidden">
    <a href="#">Link 1</a><br/>
    <a href="#">Link 2</a><br/>
    <a href="#">Link 3</a><br/>
  </div>
</div>

这是一个演示：http: //jsbin.com/exuvez/1/edit

于 2013-01-31T18:57:29.873 回答
2

对于没有 hack，也没有 javascript，您可以通过悬停事件实现您想要的。只是对 css 的一个小改动和补充：

#contentmenu{
    margin-top: 79px;
    background-color: #E9D4B5;
    width: 25%;
    height: 100%;
}
.show{
    margin-top: 2%;
    background-color: #CE9127;
    width: 96%;
    height: 10%;
    padding-left: 4%;
    color: white;
    text-decoration: none;
}
.hidden{
    display: none;
    padding-left: 8%;
    margin-top: 1%;
  width:100%;
}

.show:hover + .hidden {
  display:block;
}
.hidden:hover {
 display:block; 
}

因此 width:100% 已添加到 .hidden 中，并为悬停事件添加了两条规则。

http://codepen.io/anon/pen/eCmox

于 2013-01-31T19:20:21.457 回答