Javascript 如何使用onmouseout清除鼠标指针上显示的数据

当用户将鼠标悬停在一个图像上时，会出现一个关于该图像的信息框，当我移动到另一个图像上时，该信息框中的信息会发生变化，但当我没有图像时，该信息框会保持不变。我无法关闭信息框（即工具提示）

JS:

var id;
$(document).ready(function () {
    $('a').mouseenter(function () {
        //var id = $(this).parent().attr('myval');
        id = $(this).data('myval');
        $.ajax({//create an ajax request to foliobase.php
            type: "GET",
            //link to the foliobase.php file "?subj" here is the connector
            url: "foliobase.php?subj=" + id,
            dataType: "html",
            success: function (response) {
                $("#fillFolio").html(response);
            }
        });
    });
    $('a').onmouseleave(function () {
        id  = $(this).data.display = 'none';
    }
});

我怎样才能使信息框在鼠标离开时消失？ 我已经尝试了多个测试，但是这个框甚至没有出现，我最后一次尝试的是上面的代码

    $('a').onmouseleave(function () {
        id  = $(this).data.display = 'none';
    }

在过去的一年里，我才刚刚开始使用javascript、jquery等

提前谢谢你

这里是php

<div class="thumbnails">
<?php
$query = mysqli_query($connection, "select * from portfolio");
    print "<ul>";
    while ($row = mysqli_fetch_assoc($query)) {print "<li><a href=\"javascript:return(0)\" data-myval=".$row['folio_id'] . "><img onClick=preview.src=" . $row['image'] . "name=" . $row['folio_id'] . "src={$row['image']}></a></td></li>";
    }
    print "</ul>";
    ?>
</div>

<!--Folio Information-->
<div id="fillFolio">Project Information</div>

项目信息

我不确定，但请尝试使用：

$('a').onmouseleave(function () {
    $("#fillFolio").empty();
}

---

希望这有帮助。

为什么不使用jQuery hover=（mouseenter+mouseleave）

$("a").hover(function(){
       id = $(this).data('myval');
        $.ajax({//create an ajax request to foliobase.php
            type: "GET",
            //link to the foliobase.php file "?subj" here is the connector
            url: "foliobase.php?subj=" + id,
            dataType: "html",
            success: function (response) {
                $("#fillFolio").html(response);
            }
        });
    }, function(){
//im not sure u want to hide or want to just clear your question not clear
    $("#fillFolio").empty();
    $("#fillFolio").hide();
});

变量id；
$（文档）.ready（函数（）{
$（'a'）。悬停（函数（）{
//var id=$（this.parent（）.attr（'myval'）；
id=$（this.data（'myval'）；
$.ajax（{//创建对foliobase.php的ajax请求
键入：“获取”，
//链接到foliobase.php文件“？sub”这里是连接器
url:“foliobase.php？subj=“+id，
数据类型：“html”，
成功：功能（响应）{
$（“#fillFolio”）.html（回复）；
}
});
，函数（）{
id=$（this.empty（）；
});

请添加您的HTML代码。

$（“#fillFolio”）.empty（）；

？

$（“#fillFolio”）.removeAttr（'value'）；

如果您使用

hide（）

框将不会在悬停时显示。但他可以在收到响应后显示；$（“#fillFolio”）.HTML（响应）；$（“#fillFolio”）.show（）；因为他没有使用show，这意味着框已经显示出来了。而且当它第一次为空时不会引起任何问题。感谢您的所有输入！我希望它像一个工具提示一样工作，它适用于公文包网站，因此当我将鼠标悬停在我的一个设计上时，会出现一个框，框上显示信息项目和框在离开图像时消失，上面的示例都不起作用，是否有jquery冲突正在发生？

<script type="text/javascript">
   var id;
   $(document).ready(function () {
    $('a').hover(function () {
        //var id = $(this).parent().attr('myval');
        id = $(this).data('myval');
        $.ajax({//create an ajax request to foliobase.php
            type: "GET",
            //link to the foliobase.php file "?subj" here is the connector
            url: "foliobase.php?subj=" + id,
            dataType: "html",
            success: function (response) {
                $("#fillFolio").html(response);
            }
        });
       ,function () {
          id  = $(this).empty();
    });
</script>