如何选择图像按钮和onMouseOver显示div？

Question

我有这个结构（来自 markItUp 插件）：

这是带有CSS a：hover元素的图像按钮。我想放置 jQuery ，所以当用户将鼠标悬停在该按钮上时，另一个面板会显示在下面（另外9个按钮）点击。像这样：

如何用jQuery选择那个东西？

为了显示/隐藏面板，我将使用此代码

jQuery('body').append("<div id='panel' style='display: none;'>9 buttons inside this div</div>");
    jQuery('that.button').hover(function() {
          jQuery('#panel').show();
    }, function() {
          jQuery('#panel').hide();
    });

Answer 1

我认为你需要这个：http://api.jquery.com/hover/ 就像在例子中一样：

$("#someid").hover(
  function () {
    //show or hide your panel
  }
 );

我希望它有所帮助！

Answer 2

据我所知，您需要为按钮添加id属性，并使用jquery选择具有给定id属性的单个元素。

<li class="markItUpButton markItUpButton1 link" id="button1">...</li>
<li class="markItUpButton markItUpButton2 link" id="button2">...</li>
<li class="markItUpButton markItUpButton3 link" id="button3">...</li>

使用此选项为每个按钮选择并执行悬停操作

jQuery('#button1').hover(function() {
    your_code_here
}

Answer 3

将class属性与特定按钮编号一起使用。 如果您查看HTML，每个按钮都有一个与之关联的按钮编号。您可以使用它来确定按钮。

    // on function in jQuery works for dynamically added elements
    (". markItUpButton1").on("mouseenter", function(){
        // Add function to show panel here
    });

如果您想定位所有按钮，可以使用＆＃39; markItUpButton＆＃39;类然后根据按钮内容确定要显示的面板。

参考： http://api.jquery.com/on/