Jquery .hover () работает только на mouseenter

Question

  $(".info-icon").hover(function() {
   var a = this.id;
   var id = a.substring(10);

   var $id = "infobox-"+id;
   $('#'+$id).addClass("hover");
  },
  function() {
   $('#'+$id).removeClass("hover");
  });

Кто-нибудь видел ошибку?

Спасибо Свен.

Answer 1

Может показаться, что вы пытаетесь добавить класс "hover" к другому элементу (а затем удалить его позже), основываясь на манипулировании id элемента, который попал в точку. Если это так, я бы просто сделал это:

(function() {
    $(".info-icon").hover(function() {
        getHoverTarget(this).addClass('hover');
      },
      function() {
        getHoverTarget(this).removeClass('hover');
    });

    function getHoverTarget(element) {
       return $('#infobox-' + element.id.substring(10));
    }
})();

Это позволяет избежать дублирования логики (дублирование = возможность испортить его позже).

Причина, по которой это не сработало так, как вы написали, заключается в том, что SLaks указывает , что ваша переменная $id существует только как локальная в вашей первой функции; ваша вторая функция не имеет к ней доступа.

Answer 2

$(".info-icon").hover(function() {
    $("#infobox-" + this.id.substring(10)).addClass("hover");
},
function() {
    $("#infobox-" + this.id.substring(10)).removeClass("hover");
});

Answer 3

Поместите var $id = ""; за пределы функции, чтобы сделать ее глобальной, а затем при первом обратном вызове удалите var перед $id, как и $id = "infobox-"+id;, после чего значение будет сохранено в глобальной переменной., $id.

Теперь вы можете использовать его во втором обратном вызове.Надеюсь, это поможет.

Answer 4

Ваша $id переменная является локальной переменной и существует только в первом обратном вызове.

Вместо этого вы должны хранить идентификатор в $.data.