Home/ Questions/Q 8735043
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-13T09:57:54+00:00

I’m currently facing a problem with some css code. What I’m trying to achieve

  • 0

I’m currently facing a problem with some css code.
What I’m trying to achieve is when somebody hovers on the link in #trigger, the div #hidden to show.

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        #hidden {
            display: none;
            position: absolute;
            top: 20px;
            left: 100px;
            border: 1px solid red;
        }

        #trigger {
            border: 1px solid white;
            background: red;
        }
        #trigger:hover #hidden {
            display: block !important;
        }

    </style>
</head>
<body>

<div id="hidden">
    This hidden div.
</div>

<span id="trigger">
    <a href="#">Show</a>
</span>

</body>
</html>

I’m trying to understand why the hell this code refuses to work.
I have used similar code on many places and it worked just fine.
What’s the problem here?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    The div hidden is not in the trigger div.

    You can let your CSS code work as follows:

    <span id="trigger">
    <a href="#">Show</a>

    <div id="hidden">
        This hidden div.
    </div>
</span>

    Btw, take in considuration that the absolute positioning div (#hidden) will take the x and y of the upper element with an poistion: relative or absolute as the start point (0, 0). If there isn’t any, then it takes the body’s x and y.

    • 0