Question

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

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>

Answer 1

我不确定，但尝试使用：

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

希望这有帮助。

Answer 2

$("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();
});

Answer 3

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

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

如何使用onmouseout

3 个答案: