平滑的悬停过渡？

Posted 2021-04-06

我似乎遇到了悬停描述的动画方面的问题。悬停本身工作正常，并准确显示在它放置的位置;但是，当悬停在元素上方或远离元素时，似乎没有褪色效果。相反，描述框显示在CSS中列出的0.5s内，并以相同的方式消失。我希望创建一个平滑的过渡效果，其中描述框淡入淡出。有人可以帮我调整一下吗？

码：

#description {
    opacity:0;
    background:#fff;
    z-index:30;
    position:fixed;
    margin-left:249px; 
    margin-top:-5px; 
    border:1px solid #000; 
    width:230px; 
    height:299px;
    color:{color:text};
    -webkit-transition: opacity 0.5s ease-in-out;
    -moz-transition: opacity 0.5s ease-in-out;
    -ms-transition: opacity 0.5s ease-in-out;
    -o-transition: opacity 0.5s ease-in-out;
    transition: opacity 0.5s ease-in-out; }

#description a {
    color:{color:text};
    -webkit-transition: opacity 0.5s ease-in-out;
    -moz-transition: opacity 0.5s ease-in-out;
    -ms-transition: opacity 0.5s ease-in-out;
    -o-transition: opacity 0.5s ease-in-out;
    transition: opacity 0.5s ease-in-out; }

#sidebar:hover #description {
    opacity:0.6;
    -webkit-transition: opacity 0.5s ease-in-out;
    -moz-transition: opacity 0.5s ease-in-out;
    -ms-transition: opacity 0.5s ease-in-out;
    -o-transition: opacity 0.5s ease-in-out;
    transition: opacity 0.5s ease-in-out; }

答案

试试这个...

#description {
    opacity:0;
    background:#fff;
    z-index:30;
    position:fixed;
    margin-left:249px; 
    margin-top:-5px; 
    border:1px solid #000; 
    width:230px; 
    height:299px;
    color:{color:text};
    -webkit-transition: opacity 0.5s ease-in-out;
    -moz-transition: opacity 0.5s ease-in-out;
    -ms-transition: opacity 0.5s ease-in-out;
    -o-transition: opacity 0.5s ease-in-out;
    transition: opacity 0.5s ease-in-out;
}

#description a { color:{color:text}; }
#description:hover { opacity:0.6; }

另一答案

在我的代码中尝试了它。只是摆脱不透明，它会工作。请参阅youtiming dot com进行演示。

'opacity'是一个css属性，您需要指定级别值：http://www.w3schools.com/cssref/css3_pr_opacity.asp

另一答案

这是我刚刚制作的小提琴的实例

这是html标记

<div class="kid">
<img src="https://cleansites.us/images/katie-kid.jpg" alt="" width="600" height="750" />
<img src="https://cleansites.us/images/katie-adult.jpg" alt="" width="600" height="750" />
</div>

这是CSS

.kid {
    max-width:250px;
    position:relative;
}

.kid img {
    display:block;
    opacity:1;
    height: auto;
    transition:.6s ease;
    width:100%;
    position:absolute;
    z-index:12;
}
.kid img:hover {
    opacity:0;
}
.kid img + img {
    display:block;
    opacity:1;
    position:relative;
    z-index:10;
}

在这里小提琴：https://jsfiddle.net/cdsaekv9/7/