CODEWITHSUNDEEP
htmlcss
manu p
manu p

Reputation: 159

onclick event using css only

hi iam trying to due a on click event using css. no need java script . i due a code. that i added here . but this is working only on click time . i need it after click. 

.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>`

if i hold the click it rotate the triangle. if i leave it it go to the first position. i need the rotation also in after the click event . is there any idea to due this?

Upvotes: 0

Views: 3114

Answers (1)

Ahmed Salama
Ahmed Salama

Reputation: 2825

The only way to simulate an actual click event using only CSS is to use the checkbox hack. It works by making <input type="checkbox"> and attaching a label for it.

<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>

Now if we clicked at the span.left_arrowIcon it will change the state of checkbox input. so, now we can use the :checked pseudo-class to make the animation that you want.

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


.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);
}
<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>

Upvotes: 4

Related Questions