CODEWITHSUNDEEP
htmlcss
Ben Tinner
Ben Tinner

Reputation: 59

Cannot click on links in div that is floating on another div

I am having a bit of problem with my website:

body {
    margin: 0;
    font-family: Tahoma;
    background-color: #000000;
    background-size: cover;
    background-attachment: fixed;
    color: #ffffff;
}

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

#content {
    margin-top: 50px;
    animation: fadein 5s;
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: rgba(0, 0, 0, 0.00);
    position: fixed;
    top: 0;
    width: 100%;
}

li {
    float: left;
}

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

a {
    transition: all 0.5s;
}

/* Menu Bars */

.section-1 {
    position: fixed;
    text-align: center;
    width: 25%;
    top: 20%;
	height: 60%;	
	float: left;
    display: block;
    z-index: 1;
    background-color: #000000;
}

.section-1:hover + .menu-1 {
    opacity: 1;
    transition: opacity 0.5s ease-in-out;
}

.menu-1 {
    position: fixed;
    text-align: center;
    width: 25%;
    top: 20%;
	height: 60%;	
	float: left;
    z-index: 2;
    background-color: rgba(255, 0, 0, 0.50);
    display: block;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
    pointer-events: none;
}
<body>
    <div id="navigation-menu">
        <ul>
            <li><a href="index.html">Title</a></li>
        </ul>
    </div>
    <div id="content">
        <div class="section-1">
            <p>Menu 1</p>
        </div>
        <div class="menu-1">
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <a href="#">Link 1</a>
        </div>
    </div>
</body>

As you can see, the expected behavior is that when I hover the div with the "Menu 1" text, the div with the "Link 1" link appears and that the "Link 1" link is clickable which will direct the user to another page. However, the "Link 1" hyperlink is unclickable and instead, highlights the "Menu 1" text.

How do I make it so that the "Like 1" hyperlink can be clicked?

Upvotes: 0

Views: 134

Answers (1)

Aaa
Aaa

Reputation: 910

You have pointer-events:none on .menu-1. If you absolutely need to keep this property, add pointer-events:auto to the a tag. However, I would suggest restructuring your code so that the menu can transition without the overlay.

Upvotes: 1

Related Questions