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

Answer 2

通过用逗号分隔选择器，可以同时将相同的属性应用于多个选择器，如下所示：

selectorA,
selectorB,
selectorC {
    property: value;
    property: value;
    property: value;
}

Answer 3

它应该工作的很好，看看我的示例。

div:hover + p {
    background: #000;
    color: #fff;
    ...
}

也许transform: scale(1.1,1.1);不起作用？尝试设置基本样式以确保选择器工作正常。例如，background: red;。