不使用JavaScript操作CSS类

Question

不使用JavaScript操作CSS类

3

我希望用CSS做一个菜单图标，就像在这个链接中一样：http://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_menu_icon_js。但是我不想在我的代码中使用JavaScript。

这是HTML代码：

  <body>
    <input type="checkbox" id="showblock" />

    <div id="mySidenav" class="sidenav"> <!-- CSSnya di 2691 -->
      <img class="logo1" src="../img/logo1.png"><br><br>
      <a href="#">Home</a>
      <a href="#">About</a>
      <a href="#">Contact</a>
    </div>

    <div id ="contoh" class="content-section-b">
        <div class="mobiletoggle" >
                    <label for="showblock" class="bar1"></label>
                    <label for="showblock" class="bar2"></label>
                    <label for="showblock" class="bar3"></label>
        </div>
  </body>

以及 CSS 代码：

    .mobiletoggle{ float:right;}
    .mobiletoggle label{ display: block; cursor: pointer; }
    #showblock{
      display: none;
    }
    .bar1, .bar2, .bar3 {
        width: 30px;
        height: 3px;
        background-color: #333;
        margin: 6px 0;
        transition: 0.4s;
    }

    .change .bar1 {
        -webkit-transform: rotate(-45deg) translate(-9px, 6px) ;
        transform: rotate(-45deg) translate(-9px, 6px) ;
    }

    .change .bar2 {opacity: 0;}

    .change .bar3 {
        -webkit-transform: rotate(45deg) translate(-8px, -8px) ;
        transform: rotate(45deg) translate(-8px, -8px) ;
    }
    @media screen and (min-width:768px){.mobiletoggle{ display:none;}}
    @media screen and (max-width:767px) {
          .sidenav{ 
            width:0px;
            height: 100%;
            padding-top: 3%;
            background-color: #fff;
            opacity: 0.9;
          }
          #showblock:checked + .sidenav {
            width: 85%;
            transition: 0.8s;
          }

          #showblock:checked + .bar1 {
            -webkit-transform: rotate(-45deg) translate(-9px, 6px) ;
            transform: rotate(-45deg) translate(-9px, 6px) ;
          }

          #showblock:checked + .bar2 {opacity: 0;}

          #showblock:checked + .bar3 {
           -webkit-transform: rotate(45deg) translate(-8px, -8px) ;
           transform: rotate(45deg) translate(-8px, -8px) ;
          }}

我不知道如何只使用CSS来使用.change，就像链接中的示例一样（它使用了JavaScript），因此我使用#showblock:checked + .bar来操作动画。我该如何使用CSS中的.change？

- Rian

1

为什么你不想使用JavaScript呢？ - charlietfl

我只是想尝试一下CSS，你能给我建议吗？@charlietfl - Rian

没有办法使用CSS捕获事件。 - charlietfl

不是很确定，但是看看这个链接：https://dev59.com/05_ha4cB1Zd3GeqPsg6g - Robert

2个回答

1

这在CSS中实现起来非常复杂。你只能通过使用伪类来在与元素交互时更改元素的样式。:focus伪类可能接近于你想要实现的效果，但问题仍然是，图标只会在第一次单击图标时更改为“X”。然后，只有在失去焦点（例如单击其他地方）时才会更改回来。

- Benjamin

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Oka · Accepted Answer

在纯CSS3中可以通过（滥用）复选框，：checked 伪类选择器和通用后代选择器~来实现。所需步骤是，在较高的 z-index 上隐藏一个不可见的 (opacity: 0;) 复选框，覆盖您的菜单按钮。当 checked 时，这会激活由 ：checked ~ ... 选择器定位的样式，改变三条杠的样式。您需要调整复选框的尺寸和一般位置。

.container {
    position: relative;
    width: 35px;
    height: 35px;
}

.toggle {
  margin: 0;
  display: block;
  position: absolute;
  width: 35px;
  height: 27px;
  opacity: 0;
  
  outline: none;
  -webkit-appearance: none;
  border: none;
  
  z-index: 100;
  cursor: pointer;
}

.bar1, .bar2, .bar3 {
    width: 35px;
    height: 5px;
    background-color: #333;
    margin: 6px 0;
    transition: 0.4s;
}

.toggle:checked ~ .bar1 {
    -webkit-transform: rotate(-45deg) translate(-9px, 6px) ;
    transform: rotate(-45deg) translate(-9px, 6px) ;
}

.toggle:checked ~ .bar2 {opacity: 0;}

.toggle:checked ~ .bar3 {
    -webkit-transform: rotate(45deg) translate(-8px, -8px) ;
    transform: rotate(45deg) translate(-8px, -8px) ;
}

<div class="container">
  <input type="checkbox" class="toggle" />
  <div class="bar1"></div>
  <div class="bar2"></div>
  <div class="bar3"></div>
</div>