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')"> 

検索：クラス.ressため

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

出力：

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