为什么我不能让容器幻灯片仅响应图像

Question

我正在制作一张图像和一张幻灯片，一切似乎都按照我想要的方式工作，但是当我什至没有到达图像时，左侧都会做出反应。我玩过if了一段时间，但由于我不知道为什么。 更不用说我找不到这些单词了，但是我在这方面做得还不够。

<div id="i" onclick="remove(this)">Sample text</div>

.container {
  position: relative;
  width: 50%;
}

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

.overlay {
  position: absolute;
  bottom: 40px;
  left: 225px;
  right: -50%;
  background-color: black;
  overflow: hidden;
  width: 137%;
  height: 0%;
  transition: .5s ease;
}

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

.text {
  color: white;
  font-size: 20px;
  position: relative;
  bottom: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
}

.actives_center_image_1{
	position: relative;
	margin-left: 30%;
	bottom: 40px;
	display: block;
}

Answer 1

您已经为容器定义了悬停，并且图像留有空白。由于

，可以去除边缘或为图像定义悬停

.actives_center_image_1{
	position: relative;
	margin-left: 30%;
	bottom: 40px;
	display: block;
}

。

.container {
  position: relative;
  width: 50%;
}

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

.overlay {
  position: absolute;
  bottom: 40px;
  left: 225px;
  right: -50%;
  background-color: black;
  overflow: hidden;
  width: 137%;
  height: 0%;
  transition: .5s ease;
}

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

.text {
  color: white;
  font-size: 20px;
  position: relative;
  bottom: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
}

.actives_center_image_1{
	position: relative;
	 
	bottom: 40px;
	display: block;
}

<div class="container">
		  <img src="https://cdn.vox-cdn.com/uploads/chorus_asset/file/16026669/got_lede_image.jpg" class="actives_center_image_1"> 
		  <div class="overlay">
			<div class="text">Hello World</div>
		  </div>
		</div>

或者您可以定义另一个容器并将其放在主要容器中，然后执行相同的操作。