如何在mouseleave上显示/隐藏框？

-1

当用户在红色箱 - 绿盒子将他的鼠标如果用户从红色移动他光标移动到绿色箱 - 绿框不会消失
当用户移动他光标离开似乎
从绿色框（而不是回到红色框） - 绿色框消失。

红色方框不接触图片上的绿色方框。

这里就是我试过，但不解决问题：

$('#red').mouseenter(function() 
{ 
    $('#green').show(); 
}); 
$('#green').mouseleave(function() 
{ 
    $('#green').hide(); 
});

的这里的问题是，绿色方块消失，一旦你从红色移动光标。

来源

2016-11-11 Tom

你能告诉我们你已经尝试了什么？ –

你的html样子是什么？您的JavaScript或CSS？你试过什么了？ – Gavin

一些谷歌搜索可能会导致你到一个mouseenter和mouseleave的例子 – Jared

我认为你正试图使这个：

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <title></title> 

    <style media="screen"> 
     .red { 
      width: 200px; 
      height: 200px; 
      background-color: red; 
     } 
     .green { 
      display: none; 
      width: 200px; 
      height: 200px; 
      background-color: green; 
     } 
     .divider { 
      height: 200px; 
     } 
    </style> 

</head> 
<body> 

    <div class="red"></div> 
    <div class="divider"></div> 
    <div class="green"></div> 

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 

    <script type="text/javascript"> 

     $(document).ready(function(){ 

      $(".red").mouseenter(function(){ 
       $(".green").show(); 
      }); 
      $(".green").mouseleave(function(){ 
       $(".green").hide(); 
      }); 

     }); 

    </script> 

</body> 
</html>

来源

2016-11-11 21:27:58

'$（'。green'）。mouseenter（function（）{...}）;'不是必需的，因为它显示鼠标已经进入红色框时。如果绿色框设置为最初不显示，则绿色的mouseenter将无法显示它。 –

如何在mouseleave上显示/隐藏框？

回答

相关问题