ダイナミック関数のjavascriptホバーは動作しません

Question

ダイナミックイメージにホバーを配置しようとすると、動的divを表示する必要があります。マウスdivを削除する必要があります。私はdivからそれを隠す必要があります私はこのような何かを試してみましたが、期待どおりに動作しない場合は表示されます。私は私がマウスを削除すると、 divからオプションを使用すると、divからクローンを削除した後、divをクローズしないでください。この場合の解決策として悪い英語が残っていますか？

<img onmouseover="GoView_respond(<?php echo $print->Friend_id;?>);" onmouseout="ExitView_respond_one(<?php echo $print->Friend_id;?>);"> 
      <div class="respond_request" style="display:none;" id="pending_req_<?php echo $print->Friend_id;?>" > 
       <p class="user_details" onmouseout="ExitView_respond(<?php echo $print->Friend_id;?>);"> 
      </div> 


<script> 
    function GoView_respond(id){ 
     console.log('hovering'); 
     document.getElementById("pending_req_"+id).style.display="block"; 
    } 

    var cl=0; 

    function ExitView_respond(id){ 
    console.log('not hovering'); 
    if(cl!=1){ 
    document.getElementById("pending_req_"+id).style.display="none"; 
    } 
} 
</script> 

Answer 1

これを達成するにはさまざまな方法があります。 たとえば、マウスがuser details htmlノードに達するのを可能にする少しのタイムアウトを設定することによって、やり直すことができます。

私はより明確に、あなたのケースに応じて

<?php 
class Friend 
{ 
    public $Friend_id; 
    public $Friend_details; 
    public $Friend_image; 
    public function __construct($id, $details, $image){ 
     $this->Friend_id = $id; 
     $this->Friend_details = $details; 
     $this->Friend_image = $image; 
    } 
} 
$print = new Friend(1, 'The very first user', 'http://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png'); 
?> 
<img class="user_image" id="user_image_<?php echo $print->Friend_id; ?>" src="<?php echo $print->Friend_image; ?>" alt="some image" /> 
<div class="user_details" id="user_details_<?php echo $print->Friend_id; ?>"> 
    <h5>User details</h5> 
    <?php echo $print->Friend_details; ?> 
</div> 
<style> 
.user_details { 
    display: none; 
    background-color: lightgray; 
    width: 250px; 
    padding: 15px; 
} 
</style> 

<script> 
var userImages = document.getElementsByClassName('user_image'); 

for(var i = 0; i < userImages.length; i++){ 
    var 
     userImage = userImages[i], 
     userId = userImage.id.replace('user_image_', ''), 
     thisUserDetails = document.getElementById('user_details_' + userId), 
     mouseOutTimeout = 100, // Here is the trick 
     mouseTimer = null; // Needed in order to hide the details after that little timeout 

    userImage.addEventListener('mouseout', function(){ 
     mouseTimer = setTimeout(function(){ 
      thisUserDetails.style.display = 'none'; 
     }, mouseOutTimeout); 
    }); 

    userImage.addEventListener('mouseover', function(){ 
     clearTimeout(mouseTimer); 
     thisUserDetails.style.display = 'block'; 
    }); 

    thisUserDetails.addEventListener('mouseout', function(){ 
     var _this = this; 
     mouseTimer = setTimeout(function(){ 
      _this.style.display = 'none'; 
     }, mouseOutTimeout); 
    }); 

    thisUserDetails.addEventListener('mouseover', function(){ 
     clearTimeout(mouseTimer); 
    }); 
} 
</script> 

注意もしてみましょう：私はIE8およびそれ以前との互換性がないこと、ここgetElementsByClassNameとaddEventListenerを使用しました。 getElementsByClassNameの互換性についてはthis link、addEventListenerの場合はthis oneを確認してください。

希望します。