“顶部”的 CSS3 过渡和“左”属性不起作用

Question

我有一个列表，当我将鼠标悬停在列表上时，列表中的一项会过渡到东北。使用 margin-top 和 margin-left 属性转换有效，但悬停的项目不断推动其他元素，因此我添加了 position:relative 并尝试使用 top 和 left 过渡属性，但它似乎不起作用。

这是 jsfiddle：

列表悬停

Answer 1

添加左侧、顶部默认值
链接演示

left: 0px

Answer 2

您是否尝试过设置列表的父项。我知道有时相对会出现问题，除非基础项目也是相对或绝对的。只是一个想法。

Answer 3

使用position:absolute，它将脱离正常的文档流。您还可以给它 z-index:5 以确保它浮动在其他元素上。

Answer 4

.transition{
    transition: all .4s;
    -moz-transition: all .4s;
    -webkit-transition:all .4s;
    -o-transition: all .4s;
    
    margin-top:20px;
    border:1px solid gray;   
    width:80px;
    padding:10px;
    margin-left:50px;
    position:relative; 
    cursor:pointer;
}

.hover_top{ 
    top:0;
}
.hover_top:hover{
    top:-10px;
}

.hover_left{    
    left:0;
}
.hover_left:hover{
    left:-10px;
}

.hover_right{   
    right:0;
}
.hover_right:hover{
    right:-10px;
}

 

 <div class="hover_top transition"> Hover Top </div>
 <div class="hover_left transition"> Hover Left </div>
 <div class="hover_right transition"> Hover Right </div>

 

Answer 5

您必须定义要应用过渡效果的属性。例如：

.box { position: relative; transition: all 0.4s ease;}
.box:hover { top: -1rem;}

那是行不通的。因此，您必须默认定义 top: 0，然后在悬停时定义 top -1rem。这样

.box { position: relative; transition: all 0.4s ease; top:0}
.box:hover {top: -1rem}

就可以了。