Question

我正在尝试创建两个将放置在同一位置的容器。当我将鼠标悬停在顶部时，应该显示一个应该受到某些过渡和底部/第二个div内容影响的内容。我试过这个here

一切都很好。但是当鼠标悬停在它上面时，它会产生一些闪烁效果。如何顺利过渡？我正在使用以下片段进行过渡效果

.box:hover{
    -webkit-transform:  rotate(100deg) scale(1);
    -webkit-transform-origin:bottom right;
}

Answer 1

使用CSS transition属性使动画更流畅

.box {
    height:150px;
    width:200px;
    background:indianred;
    position:absolute;
    top:20%;
    left:40%;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    transition: all .5s;
}

Demo

注意：您使用的是-webkit特定的专有属性，因此为了使其与浏览器兼容，请使用

Demo

.box {
    height:150px;
    width:200px;
    background:indianred;
    position:absolute;
    top:20%;
    left:40%;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    transition: all .5s;
}
.box1 {
    height:150px;
    width:200px;
    border:1px solid black;
    position:absolute;
    top:20%;
    left:40%;
    z-index:-100;
}
.box:hover {
    -webkit-transform: rotate(100deg) scale(1);
    -webkit-transform-origin:bottom right;
     -moz-transform: rotate(100deg) scale(1);
    -moz-transform-origin:bottom right;
     transform: rotate(100deg) scale(1);
    transform-origin:bottom right;
}

嗯，你在comment要求解决方案，我也为此提供了解决方案..

<div class='box1'>
    <div class='box'></div>
    <p class="innerText">This is content</p>
</div>

.box {
    height:150px;
    width:200px;
    background:indianred;
    position:absolute;
    top:0%;
    left:0%;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    transition: all .5s;
}
.box1 {
    height:150px;
    width:200px;
    border:1px solid black;
    position:absolute;
    top:20%;
    left:40%;
    z-index:-100;
}
.box1:hover .box {
    -webkit-transform: rotate(100deg) scale(1);
    -webkit-transform-origin:bottom right;
     -moz-transform: rotate(100deg) scale(1);
    -moz-transform-origin:bottom right;
     transform: rotate(100deg) scale(1);
    transform-origin:bottom right;
}

Demo

我的代码与您的代码之间的区别在于，首先，您错过了position: relative;容器周围的position: absolute;容器，该容器将始终为您带来不良后果。

第二个错误是标记，如果你想隐藏一个元素，你应该嵌套一个重叠的元素，而不是将它放在你想要隐藏的元素之外。

所以在我的例子中，我移动了div中的重叠元素，并且主要部分来到这里，你在你正在转换的同一个元素上使用:hover，因此它正在折叠为no相反，在我的选择器中，我在父元素的:hover上触发动画，而不是要转换的自身元素。

如何使过渡顺利进行？

1 个答案: