0

次のコードでマウスオーバー イベントが発生しないという問題があります (クリック イベントは問題なく発生します)。

<!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 に答える