Question

当用户将鼠标放在另一个元素上时，我正在尝试显示一个弹出元素：

<!DOCTYPE HTML>
<html>
  <head>
    <script src="https://code.jquery.com/jquery-2.2.0.min.js" type="text/javascript"></script>
    <script type="text/javascript">
      $(function() {
        $('#base').hover(
          function handleIn(e) {
            var popup = $('<img/>', {
              id: 'popup',
              src: 'http://placehold.it/32x32'
            });
            popup.css({
              'position': 'absolute',
              'z-index': 300,
              'left': e.pageX - 30,
              'top': e.pageY - 30
            });
            popup.mouseover(function() {
              console.log('mouseover');
            });
            popup.mouseout(function() {
              console.log('mouseout');
            });
            $('#base').append(popup);
          },
          function handleOut() {

          }
        );
      });
    </script>
  </head>
  <body>
    <img id="base" src="http://placehold.it/256x256">
  </body>
</html>

为什么弹出元素不显示？它被添加到DOM中，但我没有看到它。

我做错了什么？我该如何解决？

Answer 1

您无法将儿童附加到<img/>元素。见here

尝试将其附加到父

$(function() {
        $('#base').hover(
          function handleIn(e) {
            console.log("asd");
            var popup = $('<img/>', {
              id: 'popup',
              src: 'http://placehold.it/32x32'
            });
            popup.css({
              'position': 'absolute',
              'z-index': 300,
              'left': e.pageX - 30,
              'top': e.pageY - 30
            });
            popup.mouseover(function() {
              console.log('mouseover');
            });
            popup.mouseout(function() {
              console.log('mouseout');
            });
            $('#base').parent().append(popup);
          },
          function handleOut() {

          }
        );
      });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img id="base" src="http://placehold.it/256x256">

顺便说一句，这样你就会在每个悬停事件中都有一个新元素。

Answer 2

尝试使用此工具提示示例：

<html>

<head>
  <link href="Styles/bootstrap.min.css" rel="stylesheet" />

</head>

<body>

  <img src="images/yourimage.jpg" class='test' data-toggle='tooltip' data-placement='right' title='your custom message' />

  <script src="Scripts/jquery-2.1.3.min.js"></script>
  <script src="Scripts/bootstrap.min.js"></script>

  <script>
    $(document).ready(function() {
      $('[data-toggle="tooltip"]').tooltip();

    });
  </script>
</body>

</html>

当用户将鼠标悬停在另一个元素上时，无法显示弹出元素

2 个答案: