Question

我试图将鼠标悬停在动态图像中必须显示一个动态div，如果删除鼠标div必须被隐藏，如果我悬停在图像div上后div需要保持可见如果我从div它必须隐藏我试过这样的东西，但没有按预期工作，如果我到图像div出现如果我放置mouseout标签那里它隐藏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>

注意：我在这里使用了getElementsByClassName和addEventListener，这与IE8及更早版本不兼容。检查this link getElementsByClassName兼容性和addEventListener {{1}}。

希望有所帮助。

javascript悬停在动态函数上不起作用

1 个答案: