[英]My css transition doesn't work
我有一個帶有ap標簽的li,它只會在你懸停li時顯示,但我無法在它之間進行轉換,我該怎么做? 也許只有javascript可能是jQuery,我不知道如何解決這個問題
<ul class="promo-line two">
<li>
<p>36%</p>
</li>
<li>
<p>45%</p>
</li>
<li>
<p>50%</p>
</li>
</ul>
和:
* {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;
}
您需要使用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.