Question

所以我试图建立像this这样的链接。到目前为止，我使用jquery，你可以检查here。当您悬停链接时出现问题。它被紫色容器覆盖我为他们两个添加了z-index，但仍未按预期工作。有时紫色容器也会向右走我不知道我应该为谷歌使用什么关键字。我真的需要一些帮助。我不介意只有CSS的解决方案。

Answer 1

z-index属性仅适用于位置不是静态的元素（即您必须为其定位relative，absolute或fixed。我我已经相应更新了你的小提琴以解决这个问题： 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;
}

Answer 2

将以下代码插入.placeholder css类

 overflow: hidden;
 position: relative;

你也应该在开始新动画之前停止动画

Answer 3

需要为链接添加位置css或z-index不适用。没有定义其他选项的位置相对对布局没有实际影响，所以它可能是这里的最佳选择

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

Answer 4

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

看到更新的小提琴。一个是固定的

Css3超链接使用jquery动画将鼠标悬停在效果上

4 个答案: