CSS：悬停或聚焦时针对一个元素进行操作，但不是两者同时

Question

CSS：悬停或聚焦时针对一个元素进行操作，但不是两者同时

javascriptjqueryhtmlcssruby-on-rails

7

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

用户应该能够使用向下键来浏览建议，并且能够使用鼠标选择建议。在这两种情况下，建议应该得到适当的高亮显示。

我的问题是在不同时高亮悬停状态和使用向上/向下箭头滚动时，如何实现上述功能。

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

为了突出显示鼠标悬停状态，我正在使用：

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

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

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

注意: 当滚动到建议框时，.tt-cursor 是一个自动添加的类，离开时会被删除。

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

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

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

- nextstep

然而，通过双重高亮，意义是清晰的：一个高亮显示使用键盘选择的内容，另一个高亮显示如果使用鼠标单击可能会选择的内容。也许更好的区分颜色以使这种区别更清晰。悬停的高亮还没有被选择，而键盘立即影响文本框（从而进行选择）。 - nathanvda

2个回答

0

不太清楚你想要什么效果，但如果你想以某种方式在视觉上显示元素既被选中又悬停，你应该同时针对这两个条件进行操作，像这样：

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

- Vitauts Stočka

我编辑了问题以改善澄清。这个解决方案适用于您的用例，但不幸的是不是我正在寻找的。 - nextstep

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Ravi · Accepted Answer

我认为这就是你需要的，只需移除hover 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", '')
  }
}