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

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

javascript jquery html css

Javascript 当用户将鼠标悬停在另一个元素上时，无法显示弹出元素,javascript,jquery,html,css,Javascript,Jquery,Html,Css,当用户将鼠标放在其他元素上时，我尝试显示一个弹出元素： <!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() {

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

<!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>


$（函数（）{
$（'#base'）。悬停(
函数handleIn（e）{
var popup=$（'

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

我做错了什么？我如何修复它？

您不能将子项附加到


尝试以下工具提示示例：


$（文档）.ready（函数（）{
$（'[data toggle=“tooltip”]'）。tooltip（）；
});
请阅读以了解如何操作..提示：替换函数handleIn（e）{
到函数（e）{
@Mosh-Feu“替换函数handleIn（e）{到函数（e）{”--为了什么？将#base
包装到div
标签有帮助，但我真的不明白为什么。这与img
标签没有结束标签这一事实有什么关系吗？我如何决定是否可以将子元素附加到特定的标签上？'void元素是一个内容模型从不允许其包含content的元素从这里开始：，列表是：area、base、br、col、command、embed、hr、img、input、keygen、link、meta、param、source、track、wbr
谢谢你的回答。你能帮我回答以下问题吗--