Question

我想尝试使用css进行点击事件。不需要java脚本。我应该有一个代码。我在这里添加。但这仅适用于点击时间。我点击后需要它。

.left_arrowIcon{


  width: 0; 
  height: 0; 
  border-top: 16px solid transparent;
  border-bottom: 16px solid transparent; 
  border-right:16px solid blue; 
  font-size: 0px;
  margin-top: 30px; 
  margin-left: 32px;
  display: inline-block;
    transition-duration: 1s;
    transition-property: transform;
}

ul {
  list-style-type: none;
}
.left_arrowIcon:active{
   transform: rotate(-90deg);

    /*transition-duration: 2s;*/

}

`<!DOCTYPE html>
<html>
<head>
<link href="index.css" rel="stylesheet">

<script src="index.js"></script>

</head>
<body>
    <ul>
         <li> <div style="font-size: 40px;float: left; margin-left: 14px;">
     menu </div> <span  class="left_arrowIcon"></span>  </li>
    </ul>       

</body>
</html>`

如果我按住它，它会旋转三角形。如果我离开它，它会进入第一个位置。在点击事件之后我也需要旋转。到底有什么想法吗？

Answer 1

仅使用CSS模拟实际点击事件的唯一方法是使用复选框hack。它的工作原理是制作<input type="checkbox">并为其附加label。

<ul>
  <li>
    <div style="font-size: 40px;float: left; margin-left: 14px;">menu </div>
    <input type="checkbox" id="btnControl"/>
    <label for="btnControl"><span  class="left_arrowIcon"></span> </label>
  </li>
</ul>

现在，如果我们点击span.left_arrowIcon，它将改变复选框输入的状态。所以，现在我们可以使用:checked伪类来制作你想要的动画。

#btnControl:checked + label > .left_arrowIcon {
    transform: rotate(-90deg);
}

＆＃13;

.left_arrowIcon{
  width: 0; 
  height: 0; 
  border-top: 16px solid transparent;
  border-bottom: 16px solid transparent; 
  border-right:16px solid blue; 
  font-size: 0px;
  margin-top: 30px; 
  margin-left: 32px;
  display: inline-block;
    transition-duration: 1s;
    transition-property: transform;
}

ul {
  list-style-type: none;
}

#btnControl {
    display: none;
}

#btnControl:checked + label > .left_arrowIcon {
    transform: rotate(-90deg);
}

＆＃13;

<ul>
  <li>
    <div style="font-size: 40px;float: left; margin-left: 14px;">menu </div>
    <input type="checkbox" id="btnControl"/>
    <label for="btnControl"><span  class="left_arrowIcon"></span> </label>
  </li>
</ul>

＆＃13;

仅使用css的onclick事件

1 个答案: