单击并离开元素时悬停正在触发

Question

我有一个奇怪的问题。我找不到任何解决方案。

我在元素上有一个点击和悬停事件。当我点击元素并离开时，点击和悬停都工作但我不希望在我点击并离开时悬停工作。

$('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>

我希望这两个功能都能正常工作，但是当我点击.menu并离开元素unhover时，不应该调用。 请指导我如何做到

Answer 1

我认为您可以使用点击状态来解决此问题。在下面的解决方案中，我们会使用额外的课程clicked来表示该项目已被点击，如果是这样的话，请{％1}做任何事情}}

＆＃13;

＆＃13;

mouseleave

＆＃13;

$('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');
});

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

使用css进行悬停的更简单的实现将是

＆＃13;

＆＃13;

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

＆＃13;

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

  $('#content > div').removeClass('shown');
  $('#' + this.id + 'Main').addClass('shown');
});

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;