为什么过渡属性在这种情况下不起作用？

Question

.pic{
	position: relative;
}

.pic .texthover{
	position: absolute;
	bottom:3%;
	display: none;
	z-index: 8000;
	margin: 0 0 3.2px 0;
	width: 100%;
	text-align: left;
	padding: 5px;
	background: rgba(213,12,16,1.00);
	border-bottom: 1px solid white;
	transition: all 2s ease;
}



.pic:hover .texthover{
	display: block;
	
	  
}

<ul class="list-images">
				<li>
					<a href="#">
					<div class="pic">
					<img src="1 escultura.fw.png" width="278" height="175" title="Esculturas del Prado"                       class="image"/>
					
						<div class="hover" style="">
							<p class="texthover">  Escultura neoclasicista hasta el XVII</p>
						</div> <!--END DIV HOVER-->
					</div>	<!--END DIV PIC-->
					
				
				</li> 

我一直在绞尽脑汁，它必须是一个非常简单的细节，逃脱了我的理解，任何人都可以指出它？谢谢大家。我把过渡属性放在原始元素中但仍然没有工作......

Answer 1

过渡的香草例子及其运作方式。您可以根据要求进行更改。

div.list-images a:hover {
    transition: background-color 0.5s linear;
    -moz-transition: background-color 0.5s linear; /* Firefox 4 */
    -webkit-transition: background-color 0.5s linear; /* Safari and Chrome */
    -o-transition: background-color 0.5s linear; /* Opera */
    -ms-transition: background-color 0.5s linear; /* Explorer 10 */
    background:#ff0000;
}

<div class="list-images"><a href="#" id="ctudeal">transition</a></div>