如何仅在鼠标悬停时触发 AJAX 请求

How to trigger AJAX requst only onmouseover

本文关键字：AJAX 请求 悬停 何仅 鼠标      更新时间：2023-09-26

我有以下脚本，显示搜索页面onmouseover的值。

<script type="text/javascript">
    function preview(val) {
      $.ajax({
        type: "POST",
        url: "search.php",
        data:'id='+val,
        success: function(data){
            $(".ress").html(data);
        }
    });
   }
 </script>

.html：

<div class="CVSearchResult" onmouseover="preview('1')">

搜索： 

<?php echo $_POST['id']; ?>

类 .ress 的输出： 

1

但是我也想隐藏输出onmouseout。我该怎么做？我的意思是只需触发 AJAX 鼠标悬停，如果不悬停则隐藏。

<div class="CVSearchResult" onmouseover="preview('1')" onmouseout="hide()">
<script>
function hide() {
    $(".ress").html('');
} 
</script>

当用户将鼠标移离元素以触发隐藏功能时，您将添加事件处理程序。

hude 函数获取结果 dom 元素(可以包含以前调用的选定结果(并将 html 设置为空字符串。

这样，当您用鼠标离开时，div 元素将被清除。

好吧，

我做了一个小提琴来展示你如何做到这一点。

摆弄它

.HTML

<div class="CVSearchResult" data-mydata="1">
  HOVER ON ME1
</div>
<div class="ress">
  This was hidden but is now visible.1
</div>

.JS

$(document).ready(function() {
  $(".CVSearchResult").on("mouseover", function() {
    preview($(this).attr("data-mydata"));
  });
  $(".CVSearchResult").on("mouseout", function() {
    $(".ress").css("display", "none");
  })
})
function preview(val) {
  $(".ress").css("border", "2px solid black");
    /* Add your own ajax call here to get the data that you want... */
  var data = val;
  $(".ress").html(data);
  $("div.ress").css("display", "block");
    /* --- */
}

.CSS

.ress {
  display: none;
  border: 1px solid black;
  font-family: Helvetica;
  position: absolute;
  left: 200px;
  top: 10px;
  padding: 5px;
}
相关文章：