Question

我遇到鼠标悬停事件没有在下一个代码中触发的问题（点击事件触发正常）：

<!doctype html>

<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Test</title>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
    <style type="text/css">
    <!--
      body {
        font-family: "Trebuchet MS", "Helvetica", "Arial",  "Verdana", "sans-serif";
        font-size: 62.5%;
      }
      .ui-menu { width: 150px; }
      .invisible {
        display: none;
      }
    //-->
    </style>
    <script>
    $(function() {
      $( "#radio" ).buttonset();
      $('.menu').menu();
      $('#radio1').mouseover(function(){
        $('#menu1').removeClass('invisible');
      });
      $('#radio1').click(function(){
        $('#menu1').removeClass('invisible');
      });
    });
    </script>
  </head>
  <body>
    <form>
      <div id="radio">
        <input type="radio" id="radio1" name="radio" /><label for="radio1">Choice 1</label>
        <input type="radio" id="radio2" name="radio" checked="checked" /><label for="radio2">Choice 2</label>
        <input type="radio" id="radio3" name="radio" /><label for="radio3">Choice 3</label>
      </div>
    </form>

    <ul id="menu1" class="menu invisible">
      <li><a href="#">Uno</a></li>
      <li><a>Dos</a></li>
      <li><a>Tres</a></li>
    </ul>
  </body>
</html>

鼠标悬停事件完全被忽略（请参阅此示例：http://jsfiddle.net/YyCde/）并且click事件按预期工作。这是预期的行为还是有错误或我遗失了什么？在此先感谢您的帮助。

Answer 1

因为，如果您在浏览器检查器或FireBug中检查DOM，则单选按钮不会跨越。相反，label充当按钮。因此mouseover未触发radio。试试这个：

$('#radio1').next('label').on('mouseover', function(e){
    $('#menu1').removeClass('invisible');
});

<强>更新

根据mu is too short

的建议

$('label[for="radio1"]').on('mouseover', function(e){
    $('#menu1').removeClass('invisible');
});

有效。 FIDDLE

Jquery mouseover buttonset无效

1 个答案: