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

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> 

我一直在为此绞尽脑汁，这一定是一个非常简单的细节，使我无法理解，有人可以指出吗？？？谢谢大家我将transition属性放在原始元素中，但仍然无法正常工作...

Answer 1

Vanila过渡范例及其运作方式。您可以根据要求进行更改。

{
    "_id": "12345",
    "A": [{
        "B1": {
            "NAME": "test1",
            "C1": [{
                "D1": [{
                        "NAME": "UserID1"
                    },
                    {
                        "NAME": "UserID2"
                    }
                ]
            }]
        }
    }, 
    {
        "B2": {
            "NAME": "test2",
            "C2": [{
                "D2": [{
                        "NAME": "UserID3"
                    },
                    {
                        "NAME": "UserID4"
                    }
                ]
            }]
        }
    }]
}

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;
}