CODEWITHSUNDEEP
javascriptjquery
Jayababu
Jayababu

Reputation: 1621

hover is firing while clicking and leaving element

I have a strange problem.I dont find any solution.

I have a click and hover event on an element.When i click on the elements and leaves both click and hover are working but i dont want hover to work when i click and leave.

$('div#menu > div.menu').hover(function() {
  $(this).addClass('menuHighlight');
  $(this).find('.spanHighlight').addClass('shown');
}, function() {
  $(this).removeClass('menuHighlight');
  $(this).find('.spanHighlight').removeClass('shown');
  console.log('unhover');
});

$('.menu').click(function() {
  var _id = $(this).attr('id');
  $('.menu').removeClass('menuHighlight');
  $(this).addClass('menuHighlight');
  $('.spanHighlight').removeClass('shown');
  $(this).find('.spanHighlight').addClass('shown');
  $('#content > div').removeClass('shown');
  $('#' + _id + 'Main').addClass('shown');
});
.spanHighlight {
  position: relative;
  bottom: 10px;
  display: block;
  height: 10px;
  background: rgb(16, 168, 171);
  display: none;
}
.shown {
  display: block!important;
}
.menuHighlight {
  background: rgb(80, 91, 123);
}
div#menu .icon > div {
  width: 30px;
  height: 30px;
  display: inline-block;
  position: relative;
  top: 10px;
}
div#menu > div.menu {
  width: 180px;
  height: 100%;
  color: white;
  display: inline-block;
  line-height: 48px;
  text-align: center;
  text-align: center;
  font-weight: bold;
  cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<div id="menu" style="
    height: 50px;
    width: 100%;
    BACKGROUND: rgb(57,65,101);
    border-radius: 5px;
">
  <div id="dashBoard" class="menu">DashBoard<span class="spanHighlight"></span>
  </div>
  <div id="addApp" class="menu menuHighlight">Add Application<span class="spanHighlight shown"></span>
  </div>
  <div id="linkApp" class="menu">Link Applications<span class="spanHighlight"></span>
  </div>
</div>

I want both the functions to work,But when am clicking on .menu and leaving the element unhover should not call. Please guide me how to do that

Upvotes: 0

Views: 43

Answers (1)

Arun P Johny
Arun P Johny

Reputation: 388316

I think you can solve it by using a clicked state, In the below solution an additional class clicked is used to indicate that that item was clicked, if so don't do anything in mouseleave

$('div#menu > div.menu').hover(function() {
  $(this).addClass('menuHighlight');
  $(this).find('.spanHighlight').addClass('shown');
}, function() {
  if ($(this).hasClass('clicked')) {
    return;
  }
  $(this).removeClass('menuHighlight');
  $(this).find('.spanHighlight').removeClass('shown');
  console.log('unhover');
});

$('.menu').click(function() {
  $('.menu.menuHighlight').removeClass('menuHighlight');
  $('.menu.clicked').removeClass('clicked');
  $(this).addClass('menuHighlight').addClass('clicked');

  $('.spanHighlight.shown').removeClass('shown');
  $(this).find('.spanHighlight').addClass('shown');

  $('#content > div').removeClass('shown');
  $('#' + this.id + 'Main').addClass('shown');
});
.spanHighlight {
  position: relative;
  bottom: 10px;
  display: block;
  height: 10px;
  background: rgb(16, 168, 171);
  display: none;
}
.shown {
  display: block!important;
}
.menuHighlight {
  background: rgb(80, 91, 123);
}
div#menu .icon > div {
  width: 30px;
  height: 30px;
  display: inline-block;
  position: relative;
  top: 10px;
}
div#menu > div.menu {
  width: 180px;
  height: 100%;
  color: white;
  display: inline-block;
  line-height: 48px;
  text-align: center;
  text-align: center;
  font-weight: bold;
  cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<div id="menu" style="
    height: 50px;
    width: 100%;
    BACKGROUND: rgb(57,65,101);
    border-radius: 5px;
">
  <div id="dashBoard" class="menu">DashBoard<span class="spanHighlight"></span>
  </div>
  <div id="addApp" class="menu menuHighlight">Add Application<span class="spanHighlight shown"></span>
  </div>
  <div id="linkApp" class="menu">Link Applications<span class="spanHighlight"></span>
  </div>
</div>

A much simpler implementation using css for hover will be

$('.menu').click(function() {
  $('.menu.selected').removeClass('selected');
  $(this).addClass('selected');

  $('#content > div').removeClass('shown');
  $('#' + this.id + 'Main').addClass('shown');
});
.spanHighlight {
  position: relative;
  bottom: 10px;
  display: block;
  height: 10px;
  background: rgb(16, 168, 171);
  display: none;
}
div#menu .icon > div {
  width: 30px;
  height: 30px;
  display: inline-block;
  position: relative;
  top: 10px;
}
div#menu > div.menu {
  width: 180px;
  height: 100%;
  color: white;
  display: inline-block;
  line-height: 48px;
  text-align: center;
  text-align: center;
  font-weight: bold;
  cursor: pointer;
}
div#menu > div.menu:hover, div#menu > div.menu.selected {
  background: rgb(80, 91, 123);
}
div#menu > div.menu:hover .spanHighlight, div#menu > div.menu.selected .spanHighlight {
  display: block!important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<div id="menu" style="
    height: 50px;
    width: 100%;
    BACKGROUND: rgb(57,65,101);
    border-radius: 5px;
">
  <div id="dashBoard" class="menu">DashBoard<span class="spanHighlight"></span>
  </div>
  <div id="addApp" class="menu selected">Add Application<span class="spanHighlight"></span>
  </div>
  <div id="linkApp" class="menu">Link Applications<span class="spanHighlight"></span>
  </div>
</div>

Upvotes: 1

Related Questions