Javascript Chrome-选择元素中的奇怪鼠标事件
我用于工作的网站在顶部有一个下拉菜单，然后在下面形成内容。单击表单中的“选择”会导致菜单项被选中，就像用户将鼠标悬停在菜单项上一样 我已经设法在一个示例页面上复制了这个问题，请看一下这个提琴：Javascript Chrome-选择元素中的奇怪鼠标事件,javascript,google-chrome,select,mouseover,Javascript,Google Chrome,Select,Mouseover,我用于工作的网站在顶部有一个下拉菜单，然后在下面形成内容。单击表单中的“选择”会导致菜单项被选中，就像用户将鼠标悬停在菜单项上一样 我已经设法在一个示例页面上复制了这个问题，请看一下这个提琴： $（文件）。准备好了吗( 函数（） { $（#nav li a'）。在（'mouseover'）上， 函数（） { 变量id='#菜单'+$（this）.parent（'li'）.attr（'id'）.substr（5）， 菜单=$（id）， 偏移量=$（此）.offset（）， xpos=offset
$（文件）。准备好了吗(
函数（）
{
$（#nav li a'）。在（'mouseover'）上，
函数（）
{
变量id='#菜单'+$（this）.parent（'li'）.attr（'id'）.substr（5），
菜单=$（id），
偏移量=$（此）.offset（），
xpos=offset.left，
ypos=offset.top+$（this.height（）；
$（'.menu'）.hide（）；
menu.css({
“左”：（xpos+2）+“px”，
“顶部”：ypos+“px”
}).show（）；
}
);
$（'nav li a'）。在（'mouseout'上，
函数（）
{
//$（'.menu'）.hide（）；
}
);
}
);
主体，部门，ul，li，a{
填充：0px；
边际：0px；
}
#导航{
位置：绝对位置；
填充：0px 0px 0px 10px；
顶部：0px；
宽度：100%；
高度：30px；
背景色：#FFF；
-webkit过渡：背景色0.5s轻松；
}
#导航：悬停{
背景色：#000；
}
#导航ul{
列表样式类型：无；
}
#李海军{
浮动：左；
}
#导航a{
显示：块；
保证金：0px 10px 0px 0px；
高度：30px；
线高：30px；
填充：0px 10px 0px 10px；
背景色：#AAA；
}
#导航菜单{
显示：无；
宽度：200px；
高度：100px；
位置：绝对位置；
背景色：#BBB；
}
#内容{
填充物：5px；
保证金：35px 0px 0px 0px；
背景色：#CCC；
}
#content.columns.column{
显示：块；
浮动：左；
宽度：200px；
}
#content.columns.column选择{
显示：块；
}
.清楚{
明确：两者皆有；
}
选择1
选择2
选择3
选择4
选择5
选择6
选择7
选择8
更新：我刚刚更新到41.0.2272.89（64位），问题似乎已经解决了 这在Firefox中也会发生吗？不，到目前为止我只在Chrome中注意到。在仍然发生？是的仍然发生-你自己能看到原始fiddle中的奇怪行为吗？是的，我也遇到了同样的问题，有人找到了解决方案吗？
<!DOCTYPE html>
<html>
<head>
<script src="../../resources/jquery/jquery-1.11.1.min.js" type="text/javascript"></script>
<title></title>
<script type="text/javascript">
$(document).ready(
function()
{
$('#nav li a').on('mouseover',
function()
{
var id = '#menu_' + $(this).parent('li').attr('id').substr(5),
menu = $(id),
offset = $(this).offset(),
xpos = offset.left,
ypos = offset.top + $(this).height();
$('.menu').hide();
menu.css({
'left': (xpos + 2) + 'px',
'top': ypos + 'px'
}).show();
}
);
$('#nav li a').on('mouseout',
function()
{
//$('.menu').hide();
}
);
}
);
</script>
<style>
body, div, ul, li, a {
padding:0px;
margin:0px;
}
#nav {
position: absolute;
padding:0px 0px 0px 10px;
top: 0px;
width: 100%;
height: 30px;
background-color:#FFF;
-webkit-transition: background-color 0.5s ease;
}
#nav:hover {
background-color:#000;
}
#nav ul{
list-style-type:none;
}
#nav li {
float:left;
}
#nav a {
display:block;
margin:0px 10px 0px 0px;
height:30px;
line-height:30px;
padding:0px 10px 0px 10px;
background-color:#AAA;
}
#nav .menu {
display:none;
width:200px;
height:100px;
position:absolute;
background-color:#BBB;
}
#content {
padding: 5px;
margin: 35px 0px 0px 0px;
background-color:#CCC;
}
#content .columns .column {
display:block;
float:left;
width:200px;
}
#content .columns .column select {
display:block;
}
.clear {
clear:both;
}
</style>
</head>
<body>
<div id="content">
<div class="columns">
<div class="column">
<select>
<option value="1">Select 1</option>
</select>
<select>
<option value="2">Select 2</option>
</select>
</div>
<div class="column">
<select>
<option value="3">Select 3</option>
</select>
<select>
<option value="4">Select 4</option>
</select>
</div>
<div class="column">
<select>
<option value="5">Select 5</option>
</select>
<select>
<option value="6">Select 6</option>
</select>
</div>
<div class="column">
<select>
<option value="7">Select 7</option>
</select>
<select>
<option value="8">Select 8</option>
</select>
</div>
</div>
<div class="clear"></div>
</div>
<div id="nav">
<ul>
<li id="link_1"><a href="#1">Link One</a></li>
<li id="link_2"><a href="#2">Link Two</a></li>
<li id="link_3"><a href="#3">Link Three</a></li>
<li id="link_4"><a href="#4">Link Four</a></li>
</ul>
<div class="menu" id="menu_1"> </div>
<div class="menu" id="menu_2"> </div>
<div class="menu" id="menu_3"> </div>
<div class="menu" id="menu_4"> </div>
</div>
</body>
</html>