JavaScript悬停在动态功能不工作

问题描述：

海iam试图将悬停在动态图像必须显示动态div，如果删除鼠标div必须隐藏，如果我在图像div上悬停后需要保留到div如果我从div中移出它必须被隐藏，我可以看到，但我没有像预期的那样工作，如果我在图像div出现，如果我把鼠标放在那里它隐藏div一次，我删除鼠标不能使用div中的选项，如果我把鼠标放在div中，一旦我从图像中删除鼠标div不关闭，对于这种情况下的解决方案糟糕的英语抱歉吗？JavaScript悬停在动态功能不工作

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

答

那么，有多种方法可以实现这一点。例如，您可以通过设置一个小超时来欺骗，该超时将允许鼠标到达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。

希望它有帮助。

非常感谢你我会尽力回复你 –

JavaScript悬停在动态功能不工作

相关推荐