.hover 在我的 div 上什么都不做

Question

我正在尝试设置 Qtip2，但在编写 javascript 时遇到了困难。出于某种原因，我的 .hover 代码什么都不做（试图将其设置为 console.log 以查看是否是问题所在并且控制台为空）。你能看看我的代码并告诉我我做错了什么吗？

谢谢，下面是片段

$(document).ready(function() {
  $('.mouseover').hover(function() {
    console.log("mouseover");
    $('mouseover').each(function() {
      $(this).qtip({
        content: {
          text: $(this).next('div')
        }
      });
    });
  });
});

.mouseover {
  border: 1px solid black;
  height: 300px;
  width: 300px;
}
.tooltip {
  display: none;
}

<html>

<head>
  <title>TODO supply a title</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link type="text/css" rel="stylesheet" href="index.css" />
</head>

<body>
  <div class='mouseover'>Tooltip testin'</div>
  <div class='tooltip'> <b>TOOLTIP</b> 
    <p>testin</p>
  </div>

  <script type="text/javascript" src="jquery-213.js"></script>
  <script type="text/javascript" src="jquery.qtip.js"></script>
  <script type='text/javascript' src='tolltip.js'></script>
</body>

</html>

Answer 1

$(document).ready(function() {
    $('.mouseover').hover(function() {
        console.log("mouseover");
        $('.mouseover').each(function() {
            $(this).qtip({
                content: { text: $(this).next('div') }
            });
        });
    });
});

你没看对。希望这有效。

Answer 2

在不使用 javascript 的情况下像这样尝试：

.tooltip {
  display: none;
}
.mouseover:hover .tooltip{
    display:block;
}

看看这个 fiddle:http://jsfiddle.net/mncknja0/

Answer 3

我不确定，但是为什么需要悬停来显示工具提示？根据 documentation 这是必要的。

请看这个例子：JsFiddle

  $('.mouseover').each(function() {
      $(this).qtip({
        content: {
          text: $(this).next('div')
        }
      });
    });

.hover 在我的 div 上什么都不做

.hover on my div does nothing

javascript

jquery

qtip2