CSS效果二元素

Question

我试图影响两个元素，事件缩略图 img:hover 也会影响 .event-date 。 当我尝试做类似 .event-date+.event-date 的事情时 它仅对 .event-date 有影响。

 .event-list .event-thumbnail img{
    	display: block;
    	transition: 0.8s;    	
    }

    .event-list .event-thumbnail img:hover +.event-date {
    	 transform: scale(1.1,1.1);
    }

    .event-thumbnail .event-date{
    	position: absolute;
    	left: 0;
    	top: 0;
    	background:#07A2DD;
    	color:#FFF;
    	width: 60px;
    	text-align: center;
    	padding: 10px 0;
    	line-height: 1;
    	font-weight: 600;
    }

<div id="latest-events">

			
	        <h1><a href="http://sd.esy.es/category/events/">events</a></h1>

	        
	        	<div class="event-list clearfix">
	        		
	        		<figure class="event-thumbnail">
						<a href="http://sd.esy.es/event2/">
												<img src="http://sd.esy.es/wp-content/uploads/2016/10/1-135x100.png" alt="2">
												
													<div class="event-date">
							<span class="event-date-day">10</span>
							<span class="event-date-month">oc</span>
							</div>
												</a>
					</figure>	

					<div class="event-detail">
		        		<h4 class="event-title">
		        			<a href="http://sd.esy.es/event2/">2</a>
		        		</h4>

		        		<div class="event-excerpt">
		        			text

	        		</div>
	        		</div>
	        	</div>
	        
	        	<div class="event-list clearfix">
	        		
	        		<figure class="event-thumbnail">
						<a href="http://sd.esy.es/event3/">
												<img src="http://sd.esy.es/wp-content/uploads/2016/10/1-135x100.png" alt=" 3">
												
													<div class="event-date">
							<span class="event-date-day">10</span>
							<span class="event-date-month">oc</span>
							</div>
												</a>
					</figure>	

					<div class="event-detail">
		        		<h4 class="event-title">
		        			<a href="http://sd.esy.es/event3/"> 3</a>
		        		</h4>

		        		<div class="event-excerpt">
		        			text text text text text text text text text text text text text text text text

	        		</div>
	        		</div>
	        	</div>
	        
	        	<div class="event-list clearfix">
	        		
	        		<figure class="event-thumbnail">
						<a href="http://sd.esy.es/event1/">
												<img src="http://sd.esy.es/wp-content/uploads/2016/10/1-135x100.png" alt=" 1">
												
													<div class="event-date">
							<span class="event-date-day">10</span>
							<span class="event-date-month">feb</span>
							</div>
												</a>
					</figure>	

					<div class="event-detail">
		        		<h4 class="event-title">
		        			<a href="http://sd.esy.es/event1/">1</a>
		        		</h4>

		        		<div class="event-excerpt">
		        		some text		        		</div>
	        		</div>
	        	</div>
	        	        </div>

Answer 1

试试这个:

.event-thumbnail img,
.event-thumbnail img + .event-date {
    transition: 0.8s;
}
.event-thumbnail img:hover,
.event-thumbnail img:hover + .event-date {
    transform: scale(1.1, 1.1);
}