Home/ Questions/Q 1958096
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-17T07:58:21+00:00

I’m having some trouble with displaying a popup div with CSS. The problem is

  • 0

I’m having some trouble with displaying a popup div with CSS. The problem is better explained with an example. Take the following html:

<html>
    <head>
        <style type"text/css">
            #popup {
                color: #fff;
                background: #8c0000
            }

            #form {
                background: #ccc;
                color: #000;
                position: absolute;
                display: none;
            }

            #popup:hover > #form {
                display: block;
            }
        </style>
    </head>
    <body>
        <span id="popup">
            Popup 
            <div id="form">
                <form>
                    <label>Text Field</label>
                    <input type="text" />
                    <label>Select Field</label>
                    <select>
                        <option value="opt1">val1</option>
                        <option value="opt2">val2</option>
                    </select>
                </form>
            </div>
        </span>
    </body>
</html>

This consists of a single span element and a single hidden div element that contains a form. The div is displayed when the mouse is hovering the span element. The problem is that when I’m going to select an option in the dropdown box, the div disapears, as if it had lost focus. The result is that I can only change the dropdown value using the keyboard.

My question is: How do I fix that? Any clue on the subject is appreciated.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I believe you might be out of luck here, as rendering of <option> elements are dependent on browser / OS / platform, and not part of the CSS box model. Using JavaScript (and jQuery), this is pretty straight-forward. I’ve added a “Done” button to your form, as this might be a better solution for choosing when to hide the form. Otherwise, the user would have to be very careful not to move the mouse pointer outside the selection dropdown, or everything would disappear (if I’ve understood your request correctly.)

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <style type"text/css">
            #popup {
                color: #fff;
                background: #8c0000
            }

            #form {
                background: #ccc;
                color: #000;
                position: absolute;
                display: none;
            }
        </style>

        <script src="http://code.jquery.com/jquery-1.4.2.min.js" language="javascript" type="text/javascript"></script>
        <script language="javascript">
        function showForm() {
            $("#form").show();
        }
        function hideForm() {
            $("#form").hide();
        }
        </script>
    </head>
    <body>
        <span id="popup" onmouseover="showForm()">
            Popup 
            <div id="form">
                <form>
                    <label>Text Field</label>
                    <input type="text" />
                    <label>Select Field</label>
                    <select>
                        <option value="opt1">val1</option>
                        <option value="opt2">val2</option>
                    </select>
                    <input type="button" value="Done" onclick="hideForm()" />
                </form>
            </div>
        </span>
    </body>
</html>
    • 0