CSS 平滑的悬停过渡？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23276428/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Smooth hover transition?
提问by brianwellers
I seem to be having trouble with the animation aspect of a hover description. The hover itself works fine and appears exactly where it is placed; however, there seems to be no fade effect when hovering over or away from the element. Instead, the description box appears sharply within the 0.5s listed in the CSS, and disappears the same way. I'm looking to create a smooth, transitioning effect, where the description box fades in and out. Can someone please help me adjust this?
我似乎在悬停描述的动画方面遇到问题。悬停本身工作正常，并准确地显示在其放置的位置；然而，当悬停在元素上方或远离元素时，似乎没有淡入淡出效果。相反，描述框在 CSS 中列出的 0.5 秒内急剧出现，并以相同的方式消失。我希望创建一个平滑的过渡效果，其中描述框淡入淡出。有人可以帮我调整一下吗？
CODE:
代码：
#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; }
回答by brianwellers
Try this...
尝试这个...
#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; }
回答by Daniel C. Deng
Tried it itself in my code. Just get rid off opacity and it will work. See youtiming dot com for demo.
在我的代码中自己尝试过。只要摆脱不透明度，它就会起作用。有关演示，请参阅 youtiming dot com。
'opacity' is a css property that you need to specify the level value: http://www.w3schools.com/cssref/css3_pr_opacity.asp
'opacity' 是一个 css 属性，您需要指定级别值：http: //www.w3schools.com/cssref/css3_pr_opacity.asp
回答by lupoll88
Here is a live example on fiddle I just made
这是我刚刚制作的小提琴的现场示例
This is the HTML Markup
这是 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>
This is the CSS
这是 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;
}
Fiddle here: https://jsfiddle.net/cdsaekv9/7/
在这里小提琴：https: //jsfiddle.net/cdsaekv9/7/
