0

So i'm trying to make a link like this. so far i use jquery, you can check here. Problem comes when you hover the link. it's covered by the purple container.
I've added z-index for both of them but still not work as expected. Also sometimes the purple container is getting far to the right.
I don't have idea what keyword should i use for google. I really need some help. I don't mind if there's solution with CSS only.

2

4 Answers 4

0

DEMO HERE (GOT IT UPDATED)

DEMO HERE (GOT IT UPDATED 2)

body{
    margin: 0;
    padding: 0;
}
.placeholder{
    background: grey;
    height: 60px;
    width: 140px;
    position:relative;
}
#kotak{
    position: absolute;
    left:-140px;
    top:0;
    width: 140px;
    height: 60px;
    background: purple;
    z-index:1;
}
a{
    z-index:10;
    color: blue;
    padding: 20px;
    width: 100%;
    display: inline-block;
    position:relative;
}

see the updated fiddle. the one is fixed

1
  • thanks, it works. but when i hovering faster, sometimes i can't see the purple container. how do i solve this? should i added duration or something like that?
    – Bari
    May 15, 2014 at 16:01
0

need to add position to the css for the link or the z-index wont apply. the position relative without other options defined has no real impact on the layout so its likely the best option here

body{
    margin: 0;
    padding: 0;
}
.placeholder{
    position: relative;
    background: grey;
    height: 60px;
    width: 140px;
}
#kotak{
    position: absolute;
    left:0;
    top:0;
    width: 0;
    height: 60px;
    background: purple;
    z-index:1;
}
a{
    z-index:10;
    color: blue;
    padding: 20px;
    width: 100%;
    display: inline-block;
    position: relative;
}
0

Insert below code to your .placeholder css class

 overflow: hidden;
 position: relative;

also you should stop animation before start the new one

0

The z-index property only works on elements whose position is not static (i.e. you must have given them a position value of relative, absolute, or fixed. I've updated your fiddle accordingly to fix this: DEMO

.placeholder{
    background: grey;
    height: 60px;
    width: 140px;
    overflow: hidden; // prevent #kotak from running outside of your button
}
#kotak{
    position: absolute;
    left:0;
    top:0;
    width: 0;
    height: 60px;
    background: purple;
}
a{
    position: relative;  // allows z-index to work properly
    z-index:1;
    color: blue;
    padding: 20px;
    width: 100%;
    display: inline-block;
}
0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.