title: a little trouble with mouseover event
body: <p>my codes are working correctly but in the change of requirement. </p>
  
  <p>i need to keep current <code>active class</code> active which is removed <strong>again i mouseover at active <code>&lt;li&gt;</code></strong></p>
  
  <p>i am not good in JQuery so can somebody help doing this??</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>(function($){
   $(document).ready(function(){
    $('a.form').on('mouseover', function(event) {
     event.preventDefault(); 
     event.stopPropagation(); 
     $(this).parent().siblings().removeClass('active');
     $(this).parent().toggleClass('active');
    });
   });
  })(jQuery);</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>li.active .btncss, .btncss:hover {
      color: #FFAE00;
      background: #ffffff;
      border: 2px solid;
      text-decoration: none;
  }
  li{display:inline}</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;ul class="list-inline"&gt;
  &lt;li class="active"&gt;&lt;a href="#within" id="within" class="btncss form"&gt;With In City&lt;/a&gt;&lt;/li&gt;
  &lt;li class=""&gt;&lt;a href="#full" id="full" class="btncss form"&gt;Full Day Hire&lt;/a&gt;&lt;/li&gt;
  &lt;li class=""&gt;&lt;a href="#half" id="half" class="btncss form"&gt;Half Day Hire&lt;/a&gt;&lt;/li&gt;
  &lt;li class=""&gt;&lt;a href="#inter" id="inter" class="btncss form"&gt;InterCity Hire&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;</code></pre>
  </div>
  </div>
  </p>