鼠标监听器并在JavaScript中选择选项。 mouseover eventListener不起作用 纯JS中的选择器

问题描述 投票：0回答：2

我正试图通过:hover eventListener为<option>选择器中的<select>元素制作个性化的mouseover。但由于某些原因，当鼠标在mouseover元素上时，option不会被解雇。

    var selectOne = document.querySelector('.select__first');
    var selectTwo = document.querySelector('.select__second');

    for (var key in selectOne) {
      if (key % 2 == 0)
        selectOne[key].classList.add('select__option-blue');
    }

    for (var key in selectTwo) {
      if (key % 2 == 0)
        selectTwo[key].classList.add('select__option-blue');
    }
 
    function onMouseOver(e) {

      var target = event.target;

      var options = event.target.closest('option');
      if (!options) return;
      console.log(options);
    }

    document.addEventListener( 'mouseover', onMouseOver);
    .select__element > p, span {
      display: inline-block;
    }

    .select {
        -webkit-appearance: listbox;
        cursor:  pointer;
    }

    .select__option-blue {
      background-color: lightblue;
    }

    option {
      cursor:  pointer;
    }
<!DOCTYPE HTML>
<html>

<head>
  <meta charset="utf-8">
  <style type="text/css">



  </style>
</head>

<body>

 <div class="select-row">
    <div class="select__element">
      <p>The last element: </p><span class="select__element-last"></span>
    </div>
    <select class="select select__first">
      <option value="birds" hidden>Select an element...</option>
      <option value="birds">One</option>
      <option value="fishes">Two</option>
      <option value="animals">Three</option>
      <option value="dino">Four</option>
      <option value="simplest">Five</option>
    </select>

    <select class="select select__second">
      <option value="birds" hidden>Select an element...</option>
      <option value="ploto">One</option>
      <option value="trava">Two</option>
      <option value="vseyad">Three</option>
    </select>
  </div>

  <script>



  </script>

</body>

</html>
javascript html css
2个回答
0
投票

显然，Chrome doesn't support mouse events在option元素上，除非你为size元素指定select属性。

0
投票

所以，是的，围绕qazxsw poi的情况非常悲伤。 :( ...正如@Veehmot所说 - 我们无法在纯JS中将选择器option的qazxsw poi元素上的鼠标事件绑定。

但！鉴于我没有找到关于stackoverflow的任何明确信息，关于在纯JavaScript上对option和select选择器进行样式化可以做些什么，我想在这个方向上分享我的成功，并为社区提供2种方法来解决这个问题基于纯JavaScript。

我为编码器找到了两种工作方式，他们也喜欢我将面临在不使用框架（jQuery等）的情况下在纯JavaScript上设计options和select的必要性。

  1. 第一种方式（不是直接和更难）是使用option选择器的形式与select制作select元素，其中包含options或<div>列表。您可以在我的CodePen项目页面上看到它的工作方式：

<buttons>

  1. 第二种方法是连接一个有趣的JS库，为<li>和https://codepen.io/Sviatoslav_FrontEnd/pen/PQbBYQ样式创建。这真的是我们想要的，它基于CSS的纯JavaScript。但！我想承认，这个剧本不是我的。我在开源博客资源上找到了它。所以我不负责它的支持或帮助。一切都是你自己的危险和风险。我在这里放置了一个链接到这个JS库和支持文件，仅仅是为了帮助我 - 爱好者纯粹的javascript。

链接：options

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.