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

Posted 2023-05-09

【中文标题】CSS：将元素定位在悬停或焦点上，但不能同时定位

【英文标题】：CSS: Target an element on hover OR focus, but not both

【发布时间】：2020-05-09 15:07:43

【问题描述】：

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

用户应该能够使用向下键滚动浏览建议，并能够使用鼠标选择建议。这些建议应在其中任何一种情况下适当突出显示。

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

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

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

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

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

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

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

这里是CodePen，以便更好地了解正在发生的事情。

我正在使用 Rails 后端，并使用 javascript 和 jQuery 处理大部分内容。

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

【问题讨论】：

然而，双高亮的含义很清楚：一个高亮显示使用键盘选择的内容，另一个高亮显示如果他们使用鼠标单击可能会选择的内容。也许更好地区分颜色以使区分更清晰。悬停的高亮还不是选择，键盘会立即影响文本框（从而进行选择）。

【参考方案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", '')
  

【讨论】：

您能修改我的 CodePen 以显示此功能吗？我不确定如何实施。

我已经检查了你的 coedpen，它的工作就像魅力一样

只要在下面使用 var sample = ['a', 'aa', 'aaa', 'aaaa'];

你在哪里使用它只需将相同的代码放在下面 var sample = ['a', 'aa', 'aaa', 'aaaa'];

是的，我把你的代码 sn-p 放在 var 示例下面，结果保持不变。您可以创建一个 codepen，但请记住包含 jquery 和 typeahead 库。

【参考方案2】：

不清楚你想要达到什么效果，但如果你想以某种方式直观地显示元素被选中并悬停在上面，你应该像这样针对这两个条件

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

【讨论】：

我编辑了问题以提高说明性。此解决方案适用于您的用例，但不幸的是不是我想要的。