CSS：在悬停或焦点上定位一个元素，但不能同时定位

Question

我正在使用typeahead.js创建一个简单的下拉列表。

用户应该能够使用向下键滚动浏览建议，并能够使用鼠标选择建议。 在这两种情况中的任何一种情况下，都应适当强调这些建议。

我遇到的问题是在不突出显示悬停状态和使用向下/向上箭头滚动时实现上述目标。

这可以在下面的 gif 中清楚地看到。

要突出显示我正在使用的悬停状态：

.tt-suggestion:hover {
  color: #f0f0f0;
  background-color: #0097cf;
}

并突出显示使用向下/向上箭头滚动到的元素：

.tt-cursor {
  color: #f0f0f0;
  background-color: #0097cf;
}

注意： .tt-cursor是一个在滚动到建议 div 时自动附加到建议 div 的类，然后在滚动离开时删除。

这是一个CodePen ，可以更好地了解正在发生的事情。

我正在使用 rails 后端，并使用 Javascript 和 jQuery 处理其中的大部分内容。

编辑：为了澄清。 我只想在悬停或滚动到时突出显示建议，而不是在悬停和滚动到时突出显示（以避免一次突出显示多个建议）。

Answer 1

我认为这就是您所需要的，只需删除悬停 css

/* .tt-suggestion:hover {
    color: #f0f0f0;
    background-color: #0097cf;
} */

  $('div').on("mouseover",'.tt-suggestion',function(){

    $('.tt-selectable').removeClass('tt-cursor')
    $('.tt-selectable').css( "color", '')
    $('.tt-selectable').css( "background-color", '')
    $(this).css( "color", '#f0f0f0')
    $(this).css( "background-color", '#0097cf')
  })
  document.onkeydown = checkKey;

function checkKey(e) {

    e = e || window.event;


    if (e.keyCode == '40') {
      $('.tt-selectable').css( "color", '')
      $('.tt-selectable').css( "background-color", '')
    }
   if (e.keyCode == '38') {
      $('.tt-selectable').css( "color", '')
     $('.tt-selectable').css( "background-color", '')
  }
}

Answer 2

目前还不清楚您想要达到什么效果，但是如果您想以某种方式直观地显示该元素被选中并悬停在上方，您应该同时针对这两个条件

.tt-cursor.tt-suggestion:hover {
  background-color: red;
}