Как выбрать кнопку изображения и 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

Насколько я понимаю, вам нужно добавить атрибут id в li для кнопок и использовать 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 2

Я думаю, вам нужно это: http://api.jquery.com/hover/ Как в примере:

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

Надеюсь, это поможет!

Answer 3

Используйте атрибут класса с указанным номером кнопки. Если вы посмотрите на HTML, с каждой кнопкой связан номер кнопки. Вы можете использовать ее для определения кнопки.

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

Если вы хотите настроить таргетинг на все кнопки, вы можете использовать класс markItUpButton, а затем определить на основе содержимого кнопки, какую панель показывать.

Ссылка: http://api.jquery.com/on/