CODEWITHSUNDEEP
javascriptjquery
Gautam Jha
Gautam Jha

Reputation: 1473

a little trouble with mouseover event

my codes are working correctly but in the change of requirement.

i need to keep current active class active which is removed again i mouseover at active <li>

i am not good in JQuery so can somebody help doing this??

(function($){
	$(document).ready(function(){
		$('a.form').on('mouseover', function(event) {
			event.preventDefault(); 
			event.stopPropagation(); 
			$(this).parent().siblings().removeClass('active');
			$(this).parent().toggleClass('active');
		});
	});
})(jQuery);
li.active .btncss, .btncss:hover {
    color: #FFAE00;
    background: #ffffff;
    border: 2px solid;
    text-decoration: none;
}
li{display:inline}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="list-inline">
<li class="active"><a href="#within" id="within" class="btncss form">With In City</a></li>
<li class=""><a href="#full" id="full" class="btncss form">Full Day Hire</a></li>
<li class=""><a href="#half" id="half" class="btncss form">Half Day Hire</a></li>
<li class=""><a href="#inter" id="inter" class="btncss form">InterCity Hire</a></li>
</ul>

Upvotes: 0

Views: 69

Answers (2)

Rayon
Rayon

Reputation: 36609

Use addClass instead of toggleClass.

.toggleClass Add or remove one or more classes from each element in the set of matched elements, depending on either the class's presence or the value of the state argument.

.addClass() Adds the specified class(es) to each element in the set of matched elements.

It's important to note that this method does not replace a class. It simply adds the class, appending it to any which may already be assigned to the elements.

Try this:

(function($) {
  $(document).ready(function() {
    $('a.form').on('mouseover', function(event) {
      event.preventDefault();
      event.stopPropagation();
      $(this).parent().siblings().removeClass('active');
      $(this).parent().addClass('active');
    });
  });
})(jQuery);
li.active .btncss,
.btncss:hover {
  color: #FFAE00;
  background: #ffffff;
  border: 2px solid;
  text-decoration: none;
}
li {
  display: inline
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="list-inline">
  <li class="active"><a href="#within" id="within" class="btncss form">With In City</a>
  </li>
  <li class=""><a href="#full" id="full" class="btncss form">Full Day Hire</a>
  </li>
  <li class=""><a href="#half" id="half" class="btncss form">Half Day Hire</a>
  </li>
  <li class=""><a href="#inter" id="inter" class="btncss form">InterCity Hire</a>
  </li>
</ul>

Upvotes: 1

Peter Rust
Peter Rust

Reputation: 401

It's a little hard to understand your question -- do you want the <li> that is originally active to be reset as active on mouseout? To do this, you need to record what was originally active and add a mouseout handler:

(function($){
	$(document).ready(function(){
        var originally_active = $('li.active');
		$('a.form').on('mouseover', function(event) {
			event.preventDefault(); 
			event.stopPropagation(); 
			$(this).parent().siblings().removeClass('active');
			$(this).parent().toggleClass('active');
		});
        $('a.form').on('mouseout', function() {
            $(this).parent().removeClass('active');
            originally_active.toggleClass('active');
        });
	});
})(jQuery);
li.active .btncss, .btncss:hover {
    color: #FFAE00;
    background: #ffffff;
    border: 2px solid;
    text-decoration: none;
}
li{display:inline}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="list-inline">
<li class="active"><a href="#within" id="within" class="btncss form">With In City</a></li>
<li class=""><a href="#full" id="full" class="btncss form">Full Day Hire</a></li>
<li class=""><a href="#half" id="half" class="btncss form">Half Day Hire</a></li>
<li class=""><a href="#inter" id="inter" class="btncss form">InterCity Hire</a></li>
</ul>

Upvotes: 0

Related Questions