html - CSS :hover not working in pratice

Question

我正在从事一个个人设计元素，其中有 5 个带有图像的图 block ，当您将鼠标悬停在其中任何一个上方时，它们会显示替代文本。我已经包含了我的源代码，但我的问题似乎是当我通过将鼠标悬停在我添加了 W3 片段的图 block 上来测试它时没有任何反应。但是，如果我检查代码并在 Chrome 检查工具中添加悬停属性，它似乎工作得很好。我在这里缺少什么？

这是我的代码 My Code

.bottom p {
	text-align: center;
}
.bottom {
	margin-top: 200px;
	width: 50%;
}
.top {
	width: 33.33333333333%;
	display: inline-block;
	
}
.tile {
	height: 200px;
	justify-content: center;
   align-items: center;
   overflow: hidden;
   padding-left: 0px;
   padding-right: 0px;
   border-style: solid;
   border-width: 5px;
   border-color:  /*Navy Blue*/ #333333/* FetchMe Orange #FBAA1E*/;	
	text-align: center;
	box-shadow: 5px 5px 10px #000000;

	
}

.tile p {
	z-index: 4;
	font-size: 24px;
	position: absolute;
	bottom: 0;
	margin-bottom: 10px;
	font-weight: bold;
	text-align: center;
	margin-left: 35%;
	margin-right: 35%;
	
}

.img1 {
	flex-shrink: 0;
   min-width: 100%;
   min-height: 100%
}

.top p {
	text-align: center;
}

.fetch-form {
   padding-top: 50px;
   padding-bottom: 50px;
   margin: 0 auto;
   position: absolute;
   z-index: 3;
   margin-left: 110px;
   margin-right: 110px;
   left: 0;
   right: 0;
}
.tiles {
	margin-left: 0px;
	margin-right: 0px;
	z-index: 2;
	position: absolute;
	top: 150px;
	left: 0px;
	color: white;
	display: inline-block;
	padding-top: 10px;
}
.inner {
	display: block;
   margin-left: auto;
   margin-right: auto;
	
}
.slider {
	z-index: -1;
	position: absolute;
	padding-right: 0;
	padding-left: 0;
	margin-right: 0;
	margin-left: 0;
	left: 0;
	right: 0;
	top: 0;
	height: 600px;
	min-width: 100%;
}
.item {
	height: 600px;
}
.container {
  position: relative;
}

.overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #008CBA;
  overflow: hidden;
  width: 0%;
  height: 100%;
  transition: .5s ease;
  z-index: 5;
}

.container:hover .overlay {
	width: 100%;
}

.text {
  white-space: nowrap; 
  color: white;
  font-size: 20px;
  position: absolute;
  overflow: hidden;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}

.image {
  display: block;
  width: 100%;
  height: auto;
}

<div class="row">
      <div class="col-xs-10 fetch-form">

            <form action="order" method="POST" role="form" id="address_form">
            <div class="col-xs-12 fetch-form">
                <div class="row">
                    <div class="col-xs-8 input">
                        <div class="input">
                            <i class="icon-prepend fa fa-home"></i>
                            <input type="text" placeholder="Street Address (optional)" id="address" name="address" class="form-control input-lg" autocomplete="off">
                        </div>
                    </div>
                    <div class="col-xs-2">
                        <input type="hidden" name="zip_code"><input type="hidden" value="true" name="set_temp_address">
                        <button class="btn btn-primary btn-lg btn-block btn" type="submit">
                            <i class="fa fa-search"></i> Fetch Me Food!
                        </button>
                    </div>
                </div>
            </div>
            <div class="row well well-sm" style="display: none;">
                <div class="col-xs-4 text-center">
                    <div class="radio" >
                        <label><center><i class="fa fa-taxi fa-lg hidden-xs">&nbsp;</i></center>
                            <input type="radio" id="type_delivery" name="order_type" value="DELIVERY" checked="checked">
                            <span class="radiosearch">&nbsp;</span><span class="ordertype">Delivery</span>
                        </label>
                    </div>
                </div>
                <div class="col-xs-4 text-center border-left">
                    <div class="radio">
                        <label>
                            <center><i class="fa fa-cutlery fa-lg hidden-xs">&nbsp;</i></center>
                            <input type="radio" id="type_takeout" name="order_type" value="TAKEOUT">
                            <span class="radiosearch">&nbsp;</span>
                            <span class="ordertype"><nobr>Pick-up</nobr></span>
                            <nobr></nobr>
                        </label>
                    </div>
                </div>
                <div class="col-xs-4 text-center border-left" >
                    <div class="radio"><a href="/account/groups" style="color: #333333;">
                        <label>
                        <center><i class="fa fa-group fa-lg" style="margin-bottom: 6px;">&nbsp;</i></center>
                        <span class="ordertype"><span style="margin-top:9px;" class="visible-xs">Group »</span></span> <span
                            class="ordertype"><span class="hidden-xs">Group Order »</span></span> </label></a></div>
                    </div>
                </div>
            </form>
        </div>
      <div class="col-xs-12 tiles">
      	<div class="inner">
	      	<div class="col-xs-3 top tile container">
	      		
		      	<p>Restarunts and Catering</p>
	  				<img src="https://s3.amazonaws.com/fetchme-prototype/images/fruits-grocery-bananas-market.jpg" class="img1 image" alt="">
	  				<div class="overlay">
					   <div class="text">Hello World</div>
	  				</div>
  				</div>
	      	</div>
	      	<div class="col-xs-3 top tile">
	        		<img src="https://s3.amazonaws.com/fetchme-prototype/images/fruits-grocery-bananas-market.jpg" class="img1" alt="">
	         	<p>Our Deals</p>
	      	</div>
		      <div class="col-xs-3 top tile">
					<img src="https://s3.amazonaws.com/fetchme-prototype/images/fruits-grocery-bananas-market.jpg" class="img1" alt="">
	   	      <p>Grocery Shopping</p>
	      	</div>
	      </div>
      </div>
      <br>
      <div class="col-xs-12 tiles">
      	<div class="inner">
	         <div class="col-xs-6 bottom tile">
	         	<img src="https://s3.amazonaws.com/fetchme-prototype/images/fruits-grocery-bananas-market.jpg" alt="" class="img1" >
	         	<p>Tailgates</p>
	         </div>
	         <div class="col-xs-6 bottom tile">
	         	<img src="https://s3.amazonaws.com/fetchme-prototype/images/fruits-grocery-bananas-market.jpg" alt="" class="img1">
	         	<p>Order Anything</p>
	         </div>
	      </div>
      </div>
      <div class="slider col-xs-12">
         <div id="myCarousel" class="carousel slide" data-ride="carousel">
            <div class="carousel-inner" role="listbox">
                   <!-- Slide one -->
               <div class="item active">
               	<img src="https://s3.amazonaws.com/fetchme-prototype/images/download.jpg" alt="">
               </div>
                  <!-- Slide two -->
               <div class="item">
               	<img src="https://s3.amazonaws.com/fetchme-prototype/images/download.jpg" alt="">
               </div>
                  <!--Slide three -->
               <div class="item">
               	<img src="https://s3.amazonaws.com/fetchme-prototype/images/download+(2).jpg" alt="">
               </div>
                  <!--Slide four -->
               <div class="item">
               	<img src="https://s3.amazonaws.com/fetchme-prototype/images/download+(2).jpg" alt="">
               </div>
         	</div>
        	</div>
      </div>
   </div>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">

Answer 1

这是其他图 block 与容器重叠的问题(z-index 问题)。你可以尝试这样的事情:

.tiles {
    pointer-events: none;
}
.container {
    pointer-events: auto;
}