Вопрос

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.

Это было полезно?

Решение

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

Другие советы

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;
}

Insert below code to your .placeholder css class

 overflow: hidden;
 position: relative;

also you should stop animation before start the new one

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;
}
Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top