CODEWITHSUNDEEP
htmlcss
user3736526
user3736526

Reputation: 25

Make div under div clickable

I'm developing a hidden thumb gallery for my online portfolio. My goal for this build is to keep the code as basic as possible to keep it running across all browsers.

While coming to what felt like a great solution to a pure CSS-hidden-thumb gallery, I've run into an issue. The div with class "Divpop2" is the designated hover area subsequently firing the thumb gallery to pop up using the transform: translateY property. The issue is the thumb gallery is then covered by the div (Divpop2") which has a higher z-index. The higher z-index of the div (Divpop2) prevents the hidden thumb gallery from covering up the div that triggers the gallery to unhide.

JSFiddle: http://jsfiddle.net/NickCParker/n5m549q9/

.Divcontainer{
width: 800px;
height: 500px;
border: 1px solid;
margin: 0px auto;
position: relative;
}

.Divpop0{
    width: 25px;
    height: 200px;
    border: 1px solid;
    float: left;
    margin: 0;
    padding: 0;
    position: relative;
    top: 140px;
    opacity: 1;
    -webkit-transition: opacity 1s;
}

.Divpop1{
    width: 25px;
    height: 200px;
    border: 1px solid;
    float: right;
    margin: 0;
    padding: 0;
    position: relative;
    top: 140px;
    opacity: 1;
    -webkit-transition: opacity 1s;
}
.Divpop1:hover{opacity: 1;}

.Divpop2{
    opacity: 1;
    z-index: 9998;
    width: 750px;
    height: 100px;
    margin: 0px auto;
    border: 1px solid;
    position: relative;
    top: 398px;
}
.Divpop3{opacity: 1;
    position: relative;
    top: 399px;
    border: solid 1px;
    width: 798px;
    height: 100px;
    background-color: blue;
    -webkit-transition-duration:.5s;
        }

.Divpop2:hover ~ .Divpop3{
    opacity:1;
    -webkit-transform:translateY(-103px);
} 


.thumbed{overflow: hidden; white-space:nowrap; margin:0 45px}
.thumbed ul{float: left; transform:translateX(0)}
ul li {display: inline-block; padding-top: 6px;}
li a:hover, a:focus{opacity:1;}
li a{opacity:0.85;}
li a:focus{opacity:1;}
ul li img {width: 135px; }

This is a back and forth issue so I'm curious if there's simple way around it without using any other language. Any insight is appreciated.

Upvotes: 2

Views: 256

Answers (1)

Shibi
Shibi

Reputation: 1383

You can put the Divpop3 inside the Divpop2 so the hover will keep working and you could click on the items thats in Divpop3.

http://jsfiddle.net/n5m549q9/2/

<div class="Divpop2">
    <div class="Divpop3">
    <ul class="thumbed">    
    <li><a href="1"><img  src="https://farm4.staticflickr.com/3696/9612259782_df05b8e2e3_b.jpg"/></a></li>
    <li><a href="2"><img  src="https://farm6.staticflickr.com/5456/9248836609_215deafe34_b.jpg"/></a></li>
    <li><a href="3"><img  src="https://farm4.staticflickr.com/3696/9612259782_df05b8e2e3_b.jpg"/></a></li>
    <li><a href="4"><img  src="https://farm6.staticflickr.com/5456/9248836609_215deafe34_b.jpg"/></a></li>
    <li><a href="5"><img  src="https://farm4.staticflickr.com/3696/9612259782_df05b8e2e3_b.jpg"/></a></li>
    </ul>
    </div>
</div>

Upvotes: 2

Related Questions