JavaScript懸停在動態功能不工作

Question

海iam試圖將懸停在動態圖像必須顯示動態div，如果刪除鼠標div必須隱藏，如果我在圖像div上懸停後需要保留到div如果我從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

那麼，有多種方法可以實現這一點。 例如，您可以通過設置一個小超時來欺騙，該超時將允許鼠標到達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> 

注：我用getElementsByClassName和addEventListener這裏，不兼容與IE8和更早版本。檢查this link的getElementsByClassName兼容性和this one的addEventListener。

希望它有幫助。