Я хотел бы создать небольшое всплывающее окно при наведении курсора на текст. Но не работает и я не понимаю почему ... Не могли бы вы мне помочь? Я хочу, чтобы при наведении курсора на «surpi» отображалось всплывающее окно с данными. Эта строка HTML динамически генерируется javascript. Вот мой код:

<a href="#" data-popup="surpris">supri</a>
$(document).ready(function() {
  popup();
});

function popup() {
  $("#correction").on("mouseover", "a", function() {
    var data = $(this).attr("data-popup"),
      offsetDataTop = $(this).offset().top,
      offsetDataLeft = $(this).offset().left;

    if (data != "") {
      // .popup creation
      $("body").prepend("<div class='popup'>" + data + "</div>");
      // .popup properties
      var popupWidth = $(".popup").innerWidth(),
        thisWith = $(this).innerWidth(),
        marginLeft = (thisWith - popupWidth) / 2;
      // .popup init
      $(".popup").css({
        opacity: 0,
        top: offsetDataTop - 40,
        left: offsetDataLeft + marginLeft
      });
      // .popup animation
      $(".popup").animate({
        opacity: 1,
        marginTop: 20
      }, "fast");
    }
  }, function() {
    $(".popup").remove();
  }); // .popup removed
};
2
nico_lrx 7 Янв 2016 в 02:34

3 ответа

Лучший ответ

Вот как я бы сделал это, используя mouseenter и mouseleave:

$(document).ready(function() {
  $('#correction').on('mouseenter', '[data-popup]', function() {
    var $this=$(this)
    var data =$this.attr("data-popup").trim();
    var offsetDataTop = $this.offset().top;
    var offsetDataLeft = $this.offset().left;
    if (data != "") {
      // .popup creation
      var $popup=$("<div class='popup'>" + data + "</div>");
      $("body").prepend($popup);
      // .popup properties
      var marginLeft = ($this.innerWidth() - $popup.innerWidth()) / 2;
      // .popup init
      $popup.css({
        opacity: 0,
        top: offsetDataTop - 40,
        left: offsetDataLeft + marginLeft
      }).animate({
        opacity: 1,
        marginTop: 20
      }, "fast");
    }
  }).on('mouseleave', '[data-popup]', function() {
      $(".popup").remove();
  })
});
.popup{
  position:absolute;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="correction">
<br>
<br>
  <a href="#" data-popup="surpris">supri</a>
</div>

<div id="result"></div>
2
Wesley Smith 7 Янв 2016 в 00:30

Измените эту часть:

$("#correction").on("mouseover", "a", function() {

Этим:

$("#correction").on("mouseenter", "a", function() {

0
Jonathan Zúñiga 6 Янв 2016 в 23:56

1) Вы нацеливаетесь на #correction, но этого нет в вашем примере. Вам нужно добавить этот идентификатор к элементу

<a href="#" id="correction" data-popup="surpris">supri</a> 

2) Вам не нужно выполнять всплывающий метод так, как он есть в вашем коде, вы можете напрямую привязаться к элементу:

$("#correction").on("mouseover", function() {
    // Do stuff
});

3) Вам нужно удалить всплывающий элемент с помощью события mouseleave. Вы можете сделать это тем же способом:

$("#correction").on({
    mouseover: function () {
        // Do stuff
    },
    mouseleave: function () {
        // Do stuff
    }
})

См. Быстрый пример https://jsfiddle.net/mark_c/jtwnyeLy/.

-1
mark_c 7 Янв 2016 в 00:03