Jquery 鼠标悬停按钮集不起作用答案

【问题标题】：Jquery mouseover buttonset isn't workingJquery 鼠标悬停按钮集不起作用
【发布时间】：2013-04-17 03:57:32
【问题描述】：

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

<!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/），单击事件按预期工作。这是预期的行为还是存在错误或我遗漏了什么？提前感谢您的帮助。

【问题讨论】：

标签： jquery jquery-ui mouseover

【解决方案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.

【讨论】：

我会选择 label[for=radio1] 而不是 .next 的东西。
是的！我不知道过滤器存在！ ;)