[英]My css transition doesn't work
I have a li with ap tag which only displays when you hover the li but I can't get a transition between that, How can I do that? 我有一个带有ap标签的li,它只会在你悬停li时显示,但我无法在它之间进行转换,我该怎么做? Maybe it is only possible whit jquery of javascript, I don't know how I can fix this anyway
也许只有javascript可能是jQuery,我不知道如何解决这个问题
<ul class="promo-line two">
<li>
<p>36%</p>
</li>
<li>
<p>45%</p>
</li>
<li>
<p>50%</p>
</li>
</ul>
And: 和:
* {margin:0;padding:0;}
.promo-line.two li:nth-child(1) {
background: red;
}
.promo-line.two li:nth-child(2) {
background: blue;
}
.promo-line.two li:nth-child(3) {
background: yellow;
}
.promo-line li p {
display: none;
transition: all 1s ease-in-out;
}
.promo-line li:hover > p {
display: block;
background: rgba(0,0,0,0.5);
color: white;
width: 314px;
height: 180px;
line-height: 180px;
text-align: center;
font-size: 25px;
box-shadow: inset 5px 5px 40px black;
}
.promo-line li {
position: relative;
width: 314px;
height: 180px;
margin: 0 0 0 4px;
float: left;
background: purple;
}
See http://jsfiddle.net/GB4QL/2/ 见http://jsfiddle.net/GB4QL/2/
You need to use opacity
property instead of display
您需要使用
opacity
属性而不是display
* {margin:0;padding:0;}
.promo-line.two li:nth-child(1) {
background: red;
}
.promo-line.two li:nth-child(2) {
background: blue;
}
.promo-line.two li:nth-child(3) {
background: yellow;
}
.promo-line li p {
opacity: 0;
background: rgba(0,0,0,0.5);
color: white;
width: 314px;
height: 180px;
min-height:180px;
line-height: 180px;
text-align: center;
font-size: 25px;
box-shadow: inset 5px 5px 40px black;
transition: all 1s ease-in-out;
}
.promo-line li:hover > p {
opacity: 1;
}
.promo-line li {
position: relative;
width: 314px;
height: 180px;
margin: 0 0 0 4px;
float: left;
background: purple;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.