Question

我有下面的腳本，它顯示了來自搜索頁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鼠標懸停和隱藏，如果不懸停。

Answer 1

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

當用戶將鼠標移離元素以觸發隱藏功能時，您正在添加事件處理程序。

hude函數獲取結果dom元素（可以包含之前調用的選定結果）並將html設置爲空字符串。

這樣當你用鼠標移開div元素被清除。

Answer 2

那麼我做了一個小提琴，而不是顯示你如何做到這一點。

Fiddle with it

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