change color for styling html email (closed)

everyone! I need help, I would like the tabs: tab1 - tab2 - tab3 remained white after clicking, now in my code in hover it turns white, but then everything vanishes. How can I do with only css and not :focus, js because does not support me the system? Any advice and help is welcome! Thank you all!!

 <style>
 body {
  font-family:"Open Sans";
background:white;
height:300px;
font-size:14px;
}

.tab section {
display:none;
 }

.tab section:target, .tab section:last-of-type {
display:block;
}

.tab section:target~section {
display:none;
}


.L1 {
padding:17px;
 border:1px solid #2c3e50;
 color:white !important;
   padding-left:10px;
  padding-right:10px;
  margin-left:-1px;
  }

  .L1:hover {
  background-color:white;
  color:black !important;
 border-bottom:1px solid white;
  padding:17px;
  padding-left:10px;
  padding-right:10px;
 }
   </style>
    <section class="tab" style="border:none;background:#1abc9c;max-  width:46.5rem;width:100%;margin:5px auto;height:51px;line-height:51px;">
  <a class="L1" href="#tab1">tab1</a>
  <a class="L1" href="#tab2" style="margin-left:-5px;">tab2</a>
 <a class="L1" href="#tab3" style="margin-left:-5px;">tab3</a>
    <section id="tab2" style="margin-top:-60px !important;padding-top:61px;">
    <span >hello2</span>
    </section>
   <section id="tab3" style="margin-top:-60px !important;padding-top:61px;">
    <span>hello3</span>
    </section>
    <section id="tab1" style="margin-top:-60px !important;padding-top:61px;">
    <span >hello1</span>
    </section>
   </section>