在所有浏览器中检测选择选项的鼠标悬停

Posted 2023-05-09

【中文标题】在所有浏览器中检测选择选项的鼠标悬停

【英文标题】：detect mouseover of select option in all browsers

【发布时间】：2012-08-30 08:30:09

【问题描述】：

我正在尝试让一个框弹出下拉菜单的一侧，以便与当前悬停的选项内联。这不容易解释，所以这里是一个工作示例（仅适用于 Firefox）。 http://jsfiddle.net/WJaVz/21/

我在 Chrome 和 IE 中尝试过，但似乎都无法识别该选项的 mouseenter 事件，因此预览框永远不会出现。我尝试将事件更改为鼠标悬停并聚焦以防他们更喜欢它们，但它在 IE 和 chrome 中仍然不起作用。 （尚未测试过 Opera 或 safari。）

一个想法是也许让下拉列表成为一个无序列表，让它看起来像一个下拉列表，我想我可以检测到 li 何时有 mouseenter 事件。

有没有人知道这个问题的解决方案，所以它可以在大多数当前浏览器中工作，如果不是全部，而不需要重建大部分？

【问题讨论】：

如果我没记错的话，你可以欺骗其他浏览器知道选择和选项的任何部分何时悬停，方法是用 div 包裹它并在那里做鼠标悬停，但我认为你不能在不创建自己的虚假 select-like 下拉菜单的情况下执行此操作。

查看这篇文章：***.com/questions/1895476/… 它有很多关于 <select> 和 <option> 元素的陷阱的详细信息，可能会帮助您解决问题

【参考方案1】：

感谢 mcpDESIGNS，我确实尝试了更多的东西，但无济于事。我最终将其重建为无序列表。我已经将列表设置为看起来像一个下拉菜单，然后我可以轻松检测用户何时将鼠标悬停在无序列表中的 li 上......这适用于所有浏览器 = WIN 8D

这是代码：http://jsfiddle.net/CJbeF/22/

【参考方案2】：

@SubstanceD 的解决方案是我找到的最好的解决方案，但它存在一些可访问性问题，因此我对其进行了重新设计以使用单选按钮字段集。

html:

<div id="colourlist">red</div>
<fieldset id="colours">
  <label for="red">red<input type="radio" name="foo" id="red"/></label>
  <label for="blue">blue <input type="radio" name="foo" id="blue"/> </label>
  <label for="green">green<input type="radio" name="foo" id="green"/></label>   
  <label for="orange">orange<input type="radio" name="foo" id="orange"/></label>       
</fieldset>
<div id="preview"></div>

css:

body
    margin: 0;
    padding: 50px;

input 
    opacity:0;

label 
    display:block;
    height:20px;

#colourlist
    position: absolute;
    border: 1px solid #B5B0AC;
    width: 200px;
    height: 21px;
    background: url('http://www.thermaxindia.com/images/dropdown_arrow.JPG') 180px 0 no-repeat;    

label:hover
    background-color: #3399FF;

#colours
   display: none;
   position: relative;
   top: 22px;
   left: 0;
   width: 200px;
   position: relative;
   border: 1px solid #B5B0AC;
   overflow-y: scroll;
   height:60px;

#preview
   display: none;
   position: relative;
   background-color: #fff;
   border: 1px solid #ccc;
   padding: 10px;
   width: 250px;
   height: 30px;  

js:

$("#colours label").on('mouseenter', function()
    var O = $(this).offset();
    var CO = $("#colours").offset();
    $("#preview").css("top", O.top-150).show();
    $("#preview").css("left", CO.left+160);
    var text = $(this).text();
    $("#preview").css("background-color", text);
);
$("#colours input").on('click', function()
    var text = $(this).attr("id");
    $("#colourlist").text(text);
    $("#colours").hide();
    $("#preview").hide(); 
);
$("#colourlist").on('click', function(e)
    e.stopPropagation();
    $("#colours").show();   
);
$("body").on('click',function(e)
    $("#colours").hide();
);

这是小提琴：http://jsfiddle.net/MikeGodin/CJbeF/109/