当应用鼠标悬停样式时，通过箭头键导航删除应用于列表项的选定类

Remove selected class applied to list item by arrow key navigation when mouse hover style is applied

本文关键字：列表 应用于 删除 导航 样式 悬停 鼠标 应用      更新时间：2023-09-26

当文本框中按上下箭头键时，所选的类应用于列表项。如果我将鼠标指针移动到列表项上并同时按上下箭头键，则悬停和所选类都应用于列表项。如何切换悬停和选择类类似于选择输入选项?

http://jsfiddle.net/AyAZx/790/

$('#college').keyup(function(e) {
  var $listItems = $('.field-wrap li');
  var key = e.keyCode,
    $selected = $listItems.filter('.selected'),
    $current;
  $listItems.removeClass('selected');
  var menu = $('#college_list');
  var height = $selected.outerHeight();
  var top = menu.scrollTop();
  var menuHeight = menu[0].scrollHeight;
  if (key == 40) // Down key
  {
    if (!$selected.length || $selected.is(':last-child')) {
      $current = $listItems.eq(0);
      menu.scrollTop(0);
    } else {
      $current = $selected.next();
      menu.scrollTop(top + height);
    }
    $current.addClass('selected');
  }
  if (key == 38) // Up key
  {
    if (!$selected.length || $selected.is(':first-child')) {
      $current = $listItems.last();
      menu.scrollTop(menuHeight + height);
    } else {
      $current = $selected.prev();
      menu.scrollTop(top - height);
    }
    $current.addClass('selected');
  }
});
.field-wrap ul {
  width: 93%;
  margin-top: 1px;
  border: 1px solid #3498DB;
  position: absolute;
  z-index: 9;
  background: white;
  list-style: none;
  max-height: 100px;
  overflow-y: auto;
}
.field-wrap ul li {
  padding: 2px;
  border: solid grey;
  border-width: 0 0 2px 0;
}
.field-wrap ul li:hover {
  background: #2980B9;
}
<div class="field-wrap">
  <input type="text" id="college" placeholder="Name" required autocomplete="off" />
  <ul id="college_list">
    <li>abc</li>
    <li>def</li>
    <li>asdff</li>
    <li>dasdf</li>
    <li>asdef</li>
    <li>asdf</li>
    <li>asf</li>
    <li>asdef</li>
  </ul>
</div>

恐怕在这种情况下，您将不得不将css:hover替换为mousemove事件:

$('#college_list li').mousemove(function() {
   $('.field-wrap li').removeClass('selected');
   $(this).addClass('selected');
});
相关文章：