Блог

я пытаюсь создать галерею, в которой я нажимаю на overlay div, и, таким образом, открывается модальный shadowbox с соответствующим изображением. вот моя разметка

  <li class="grow pic">
 <a class="shadowboxLink" href="img/car_details/1large.jpg" rel="shadowbox">
 <div class="overlayForCarDetails"></div>
 <img class="mediumImg" src="img/car_details/1medium.jpg" alt=""></a>
 </li>
  

Теперь, когда я нажимаю на ссылку, она работает нормально.
Я хотел добавить эффект к изображению при наложении ссылки
итак, я добавил jquery следующим образом

         $('.shadowboxLink').mouseenter(function () {
            $(this).children('.overlayForCarDetails').css('opacity', '0.7');
            $(this).children('.overlayForCarDetails').next().find('.mediumImg').addClass('zoomed');
        });
  

но почему-то класс не применяется.

класс является

 .zoomed {
-moz-transform: scale(1.10);
-webkit-transform: scale(1.10);
-o-transform: scale(1.10);
transform: scale(1.10);
-ms-transform: scale(1.10);
}
  

Пожалуйста, скажите мне, где я делаю это неправильно.
Спасибо.

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

  $('.shadowboxLink').mouseenter(function () {

            $(this).children('.overlayForCarDetails').css('opacity', '0.7');
            $(this).children('.overlayForCarDetails').next('.mediumImg').addClass('zoomed');
        });
  

Вы излишне добавили, .children('.overlayForCarDetails').next().find('.mediumImg') когда вы можете просто использовать .find('.mediumImg') изменение на:

 $('.shadowboxLink').mouseenter(function () {
    $(this).children('.overlayForCarDetails').css('opacity', '0.7');
    $(this).find('.mediumImg').addClass('zoomed');
});