Question

我正在使用HTML＆amp; amp; CSS和我有一个部分，我希望我的图像在翻转时改变。我的问题是我可以得到第一个做我想要的东西，但是当我在并排的图像上尝试相同的方法时，一切都被移动或者它不起作用。您可以在网站的“核心价值”部分中看到第一个六边形的示例。你可以拉我的Githib回购here或者我也添加了fiddle。谢谢！

.hex-image  {
	padding-top: 70px;
}


.hexy-hex {
	position: relative;
	margin-top: 60px;
	height: 900px;	
}
	
.hexy-hex-2 {
	position: relative;
	top: -45px;	
}

.hexy-hex-3 {
	position: relative;
	top: -45px;	
}

.hexy-hex-4 {
	position: relative;
	top: -45px;	
}

.hexy-hex-5 {
	position: relative;
	top: -45px;	
}	

.lt-blue-hex {
	margin: 0px;				
}


.drk-grey-hex {
	margin: 0px;		
}

.lt-grey-hex {
	margin: 0px;			
}

#Spirituality {
	background-image: url('http://i.imgur.com/DPTzosk.png');
	height: 200px;
	width: 175px;
}

#Spirituality:hover {
	background-image: url('http://i.imgur.com/Ha9YgEG.png');
}

    <section class="hex-image"> 	
    				
    				<h1 style="color: #686868" align="center">Core Values</h1>
    				
    				
    					<div class="hexy-hex" align="center">	
    															
    						<div id="Spirituality"></div>			
    						<!-- <a class="lt-blue-hex cv" href="http://"><img src="images/blue-hex-up-sm.png" title="JDI" /></a>	-->
    						
    															
    					
    					<div class="hexy-hex-2" align="center">
    															
    						<div id="Honesty"></div>
    						
    						<div id="Innovation"></div>
    							
    							
    						
    						
    							<a class="drk-grey-hex" href="http://"><img src="http://i.imgur.com/n87uvmk.png" title="JDI" /></a>
    							
    							<a class="lt-grey-hex" href="http://"><img src="http://i.imgur.com/vCNrceH.png" title="JDI" /></a> 
    															
    					
    					<div class="hexy-hex-3" align="center">
    										
    							<a class="lt-grey-hex" href="http://"><img src="http://i.imgur.com/vCNrceH.png" title="JDI" /></a>
    							
    							<a class="lt-blue-hex" href="http://"><img src="http://i.imgur.com/DPTzosk.png" title="JDI" /></a>	
    												
    							<a class="drk-grey-hex" href="http://"><img src="http://i.imgur.com/n87uvmk.png" title="JDI" /></a>
    
    							
    				
    					<div class="hexy-hex-4" align="center"	>
    										
    							<a class="lt-blue-hex-2" href="http://"><img src="http://i.imgur.com/DPTzosk.png" title="JDI" /></a>
    							
    							<a class="drk-grey-hex-2" href="http://"><img src="http://i.imgur.com/n87uvmk.png" title="JDI" /></a>																
    							<a class="lt-grey-hex-2" href="http://"><img src="http://i.imgur.com/vCNrceH.png" title="JDI" /></a>
    							
    							<a class="lt-blue-hex-2" href="http://"><img src="http://i.imgur.com/DPTzosk.png" title="JDI" /></a>
    					
    					
    					<div class="hexy-hex-5" align="center"	>
    						
    							<a class="drk-grey-hex-2" href="http://"><img src="http://i.imgur.com/n87uvmk.png" title="JDI" /></a>
    													
    							<a class="lt-grey-hex-2" href="http://"><img src="http://i.imgur.com/vCNrceH.png" title="JDI" /></a>
    														
    							<a class="lt-blue-hex-2" href="http://"><img src="http://i.imgur.com/DPTzosk.png" title="JDI" /></a>
    											
    							<a class="drk-grey-hex-2" href="http://"><img src="http://i.imgur.com/n87uvmk.png" title="JDI" /></a>
    						
    							<a class="lt-grey-hex-2" href="http://"><img src="http://i.imgur.com/vCNrceH.png" title="JDI" /></a>
    
    					</div>
    				</div>
    			</div>	
    		</div>
    	</div>	
    			
    	<div class="clear"></div>	
    				
</section>

Answer 1

所以对你的问题：你试图实现的是像第一个六边形上的鼠标悬停效果。你似乎已经尝试过失败，因为六边形（<div> s）确实显示在彼此之上。相反，您使用<a> - 标记构建了六边形金字塔，但现在没有鼠标悬停效果，因为<a> - 标记具有硬编码<img>，无法使用CSS更改。

在所有情况下，您都有几种可能性。一个可能是通过JavaScript / jQuery更改鼠标悬停的<img>。另一个（甚至更多）将通过CSS尝试一种方法，并且你已经尝试过自己（至少从你的代码中的注释看起来那样），让我们继续。

因此，第二行中的<div>会相互显示，因为默认情况下<div>是一个块元素。如果您希望它们与您构建金字塔的<a> - 标签一样叠加，那么您需要它们像内联元素一样（因为<a> - 标签是什么）。这可以通过向您的<div>添加以下CSS规则来完成（例如）：

display: inline-block;

现在您可以像<a>一样使用它们，因此通过CSS设置初始背景图像，并通过CSS和:hover选择器进行更改。我已经更新了你的小提琴，并为第二行做了这些（显然不是你想要的图像，但它应该是可以理解的）：https://jsfiddle.net/7k50bhva/5/ 您可以按照该示例查看其他行。

请注意，如果您想拥有真实的链接，我会在<a> s中放置透明的<div> - 标记。在那些透明（无内容）<a> - 标记上，您必须指定width和height。

任何人都可以告诉我如何使我的这些图像有悬停？

1 个答案: