Tom Tom - 1 year ago 115
CSS Question

How to show/hide box on mouseleave?

What is the simplest way to do the following?

  1. When user moves his mouse over the red box- the green box appears

  2. If user moves his cursor from red to green box- the green box doesn't disappear

  3. When user moves his cursor away from the green box (and not back to the red box)- the green box vanishes.

The red box doesn't touch the green box- like on the picture.


Here's what I tried but that doesn't solve the problem:


The problem here is that the green box vanishes once you move your cursor from red one.

Answer Source

I think you are trying to make this:

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

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


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

    <script src=""></script>

    <script type="text/javascript">





Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download