如何使用箭头键和悬停事件将css应用于下拉列表链接？

时间：2015-08-13 20:22:39

标签： javascript jquery html css

我是初学者网络开发人员，我正在尝试使用向上和向下键在搜索结果下拉列表中启用选择。以前它只使用鼠标，所以你必须用鼠标悬停在搜索结果上，然后点击你感兴趣的链接。到目前为止，我已经能够将我的css类应用到结果行中。表，但是一旦我释放向上或向下键，css将恢复为默认值。到目前为止，这是我的代码：

悬停css：

.search .results a:hover {
    text-decoration: none;
    color: #fff;
    text-shadow: 0 -1px rgba(0, 0, 0, 0.3);
    border-color: #2380dd #2179d5 #1a60aa;
    background-color: #338cdf;
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #59aaf4), color-stop(100%, #338cdf));
    background-image: -webkit-linear-gradient(top, #59aaf4, #338cdf);
    background-image: -moz-linear-gradient(top, #59aaf4, #338cdf);
    background-image: -ms-linear-gradient(top, #59aaf4, #338cdf);
    background-image: -o-linear-gradient(top, #59aaf4, #338cdf);
    background-image: linear-gradient(top, #59aaf4, #338cdf);
    -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 1px rgba(0, 0, 0, 0.08);
    -moz-box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 1px rgba(0, 0, 0, 0.08);
    -ms-box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 1px rgba(0, 0, 0, 0.08);
    -o-box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 1px rgba(0, 0, 0, 0.08);
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 1px rgba(0, 0, 0, 0.08);
}

突出显示css：

.highlight {
    text-decoration: none;
    color: #fff;
    text-shadow: 0 -1px rgba(0, 0, 0, 0.3);
    border-color: #2380dd #2179d5 #1a60aa;
    background-color: #338cdf;
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #59aaf4), color-stop(100%, #338cdf));
    background-image: -webkit-linear-gradient(top, #59aaf4, #338cdf);
    background-image: -moz-linear-gradient(top, #59aaf4, #338cdf);
    background-image: -ms-linear-gradient(top, #59aaf4, #338cdf);
    background-image: -o-linear-gradient(top, #59aaf4, #338cdf);
    background-image: linear-gradient(top, #59aaf4, #338cdf);
    -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 1px rgba(0, 0, 0, 0.08);
    -moz-box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 1px rgba(0, 0, 0, 0.08);
    -ms-box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 1px rgba(0, 0, 0, 0.08);
    -o-box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 1px rgba(0, 0, 0, 0.08);
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 1px rgba(0, 0, 0, 0.08);
}

Keydown处理程序：

var current_row = -1;
var up = 38;
var down = 40;

$("#sinput").keydown(function (e) {

    switch (e.keyCode) {
        case down:
            var links = $(".results").find("a");

            if (current_row < links.length) {
                links.eq(current_row).removeClass();
                current_row++;
            }

            //links.eq(current_row).removeClass("hover");
            links.eq(current_row).addClass("highlight");
            break;

        case up:
            var links = $(".results").find("a");

            if (current_row > 0) {
                links.eq(current_row).removeClass();
                current_row--;
            }

            //links.eq(current_row).removeClass("hover");
            links.eq(current_row).addClass("highlight");
            break;
    }
    return true;
});

我想也许悬停类干扰了我的高亮类（它不应该依赖于鼠标悬停事件）所以我尝试删除它。但是这不起作用。突出显示但是一旦我释放上/下键，它就会消失。为什么会发生这种情况？

1 个答案:

答案 0 :(得分：1)

我试图将您的代码减少到最低限度，对我来说，看起来JavaScript工作得很好（current_row < links.length应该是current_row < links.length - 1）。

var current_row = -1;
var up = 38;
var down = 40;

$("#sinput").keydown(function (e) {
  switch (e.keyCode) {
    case down:
      var links = $(".results").find("a");

      if (current_row < links.length - 1)
      {
        links.eq(current_row).removeClass();
        current_row++;
      }

      links.eq(current_row).addClass("highlight");
      break;
    case up:
      var links = $(".results").find("a");

      if (current_row > 0)
      {
        links.eq(current_row).removeClass();
        current_row--;
      }

      links.eq(current_row).addClass("highlight");
      break;
  }
  return true;
});
.search .results a:hover {
  color: red;
}

.highlight {
  color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="search">
  <input type="text" id="sinput" />
  <ul class="results">
    <li><a>Foo</a></li>
    <li><a>Bar</a></li>
    <li><a>Baz</a></li>
  </ul>
</div>

原始理论：可能导致此问题的原因是.highlight是一个相对较短的选择器，而在CSS中，具有最长选择器的规则优先。

如果您有一个规则.search .results a来设置结果项的默认样式，它会覆盖.highlight中的属性。
因此，以下示例无效。

var current_row = -1;
var up = 38;
var down = 40;

$("#sinput").keydown(function (e) {
  switch (e.keyCode) {
    case down:
      var links = $(".results").find("a");

      if (current_row < links.length - 1)
      {
        links.eq(current_row).removeClass();
        current_row++;
      }

      links.eq(current_row).addClass("highlight");
      break;
    case up:
      var links = $(".results").find("a");

      if (current_row > 0)
      {
        links.eq(current_row).removeClass();
        current_row--;
      }

      links.eq(current_row).addClass("highlight");
      break;
  }
  return true;
});
.search .results a {
  color: gray;
}

.search .results a:hover {
  color: red;
}

.highlight {
  color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="search">
  <input type="text" id="sinput" />
  <ul class="results">
    <li><a>Foo</a></li>
    <li><a>Bar</a></li>
    <li><a>Baz</a></li>
  </ul>
</div>

如果是这种情况，您只需在.highlight声明中更具体一点来解决问题：

var current_row = -1;
var up = 38;
var down = 40;

$("#sinput").keydown(function (e) {
  switch (e.keyCode) {
    case down:
      var links = $(".results").find("a");

      if (current_row < links.length - 1)
      {
        links.eq(current_row).removeClass();
        current_row++;
      }

      links.eq(current_row).addClass("highlight");
      break;
    case up:
      var links = $(".results").find("a");

      if (current_row > 0)
      {
        links.eq(current_row).removeClass();
        current_row--;
      }

      links.eq(current_row).addClass("highlight");
      break;
  }
  return true;
});
.search .results a {
  color: gray;
}

.search .results a:hover {
  color: red;
}

.search .results a.highlight {
  color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="search">
  <input type="text" id="sinput" />
  <ul class="results">
    <li><a>Foo</a></li>
    <li><a>Bar</a></li>
    <li><a>Baz</a></li>
  </ul>
</div>

实际解决方案：生成搜索结果的keyup侦听器可能会导致此问题：释放上/下键时，结果会重新生成并覆盖现有结果（因此highlight类。如果keyup为e.keyCode或up，您可以尝试从down处理程序返回，或者监听input事件（仅在实际输入时触发）更改）：$("#sinput").on("input", function(e) { ... })

相关问题
最新问题