Как использовать функцию jQuery на множественных изображениях

Question

У меня есть коллекция изображений с классом "imgGroup".Для каждого изображения есть div, содержащий две кнопки.Этим элементам присваивается класс с именем "btnActions".Мои изображения отображаются из базы данных.

Если у меня есть неизвестное количество изображений, как я могу использовать приведенный ниже код jQuery для каждого отдельного изображения?В настоящее время, когда я наводю указатель мыши на изображение, для всех изображений отображаются элементы «btnActions» (как и ожидалось - но не желательно).

PS - эта функция jQuery.each кажется решением, но мой мозг не переноситвокруг него очень хорошо.

Спасибо

$('.imgGrp').hover(function() {  
    $('.btnActions').css("display", "block");  
});  

Answer 1

Попробуйте этот Mickormick.

$(window).load(function() {

    $(".imgGroup").hover(
      function () {
        $(this).addClass("hover");
        $(".hover > .btnActions").show();
      }, 
      function () {
        $(this).removeClass("hover");
        $(".hover > .btnActions").hide();
      }
    );

});

Answer 2

Для этого вам не нужен JavaScript.

.imgGrp:hover .btnActions {
  display: block;
}

Answer 3

Этот скрипт jQuery покажет элемент с классом "btnActions", когда вы над элементом с классом "imgGroup".Как только вы переместите указатель мыши, элемент с классом "btnActions" будет скрыт.Часть window.load будет ждать, пока все ваши изображения загрузятся, прежде чем применять эффект.

$(window).load(function() {

    $(".imgGroup").hover(
      function () {
        $(this).find("button").show();
      }, 
      function () {
        $(this).find("button").show();
      }
    );

});

Вуаля, удачи, дайте мне знать, как это происходит!

PS: вы также можете сделать этопостепенно добавьте обычные .show () и .hide () на .show («медленный») и .hide («быстрый»).

UPDATE:

Вот еще один метод, который может работать:

$(window).load(function() {

    $(".imgGroup").hover(
      function () {
        $(this).addClass("hover");
        $(".hover > .btnActions").show();
      }, 
      function () {
        $(this).removeClass("hover");
        $(".hover > .btnActions").hide();
      }
    );

});

Дайте мне знать, если они работают.

Answer 4

$('.imgGrp').hover(function() {  
    $('.btnActions', $(this)).css("display", "block");  
}); 

будет применяться только к ".btnActions", над которыми вы находитесь.