Question

我用于工作的网站顶部有一个下拉菜单，然后在下面形成内容。单击表单中的选择会导致选择菜单项，就好像用户已经悬停在它们上面一样。

我设法在示例页面上复制问题，看看这个小提琴：http://jsfiddle.net/86d1nx7x/1/

<!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">&nbsp;</div>
    <div class="menu" id="menu_2">&nbsp;</div>
    <div class="menu" id="menu_3">&nbsp;</div>
    <div class="menu" id="menu_4">&nbsp;</div>
  </div>


    </body>
</html>

当我点击下面的选择2和4时，菜单上有鼠标悬停事件被触发。他们似乎有正确的xpos但是ypos是0。

我一直在努力将错误归结为特定的Chrome版本或操作系统，因此如果您遇到错误，请发表评论，说明您使用的是哪个版本的Chrome和操作系统 - 我使用的是Chrome 37 64bit在Linux上。

由于

更新：此问题出现在第39版（截至2014年11月的最新版本）。我发现的唯一解决方案是恢复到版本34。

更新：我刚刚更新到41.0.2272.89（64位），问题似乎已修复！

Chrome - 来自Select元素的奇怪鼠标事件

0 个答案: