0

我在下一个代码中未触发 mouseover 事件时遇到问题（单击事件触发正常）：

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

4

1 回答 1

2

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

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

更新：

正如mu 所建议的那样太短了

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

有用。小提琴。

于 2013-04-17T04:10:50.930 回答