У меня есть HTML, созданный Sharepoint. Я добавил таблицу и несколько изображений, и я хотел бы добавить .hover к выбранному изображению. После долгих страданий я могу выбрать изображение с помощью .querySelector, но если я попытаюсь:

    $(document).ready(function ()
    {
      document.querySelector('.ms-rteTableEvenCol-0 > a > img').hover(function ()
      {
        $(this).css('opacity', '.3');
      }, function ()
      {
      $(this).css('opacity', '1');
      });
    });

Я получаю «Uncaught TypeError: document.querySelector (...). Hover не является функцией». Я добавил Jquery, так что это не может быть причиной. (Большинство связанных тем советуют добавить)

Если я попробую .onmouseover:

$(document).ready(function ()
{
  document.querySelector('.ms-rteTableEvenCol-0 > a > img').onmouseover = function()
  {
   $(this).css('opacity', '.3');
  }
});

Это работает, но эффект является постоянным, поэтому даже если мышь покидает изображение, прозрачность остается 30%. Поэтому я хотел бы использовать .hover, но у меня нет опыта, поэтому я понятия не имею, в чем может быть проблема, пожалуйста, помогите мне.

0
Nefri 22 Фев 2018 в 15:51

3 ответа

Лучший ответ

Вы пытаетесь использовать метод jQuery .hover () для выбранного элемента DOM document.querySelector () .

Вы можете вызывать только методы jQuery для объектов jQuery. Используйте jQuery для вашего селектора, чтобы получить объект jQuery, который затем можно вызвать методом hover.

$(document).ready(function () {
  $('.ms-rteTableEvenCol-0 > a > img').hover(function () {
    $(this).css('opacity', '.3');
  }, function () {
      $(this).css('opacity', '1');
  });
});
2
Felipe Warrener-Iglesias 22 Фев 2018 в 14:04

С точки зрения ошибки, при добавлении jQuery вам нужно использовать его собственный движок, чтобы иметь доступ к функции hover ( он не расширяет собственные объекты ).

Так что используйте

jQuery('.ms-rteTableEvenCol-0 > a > img').hover(function ()

С другой стороны, вы можете просто использовать CSS

.ms-rteTableEvenCol-0 > a > img:hover{
   opacity:0.3;
}
3
Gabriele Petrioli 22 Фев 2018 в 12:57

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

.ms-rteTableEvenCol-0 > a > img:hover {
  opacity: .3;
}
6
VXp 22 Фев 2018 в 13:14