html - anchor 元素悬停仅适用于 bootstrap 4 轮播的一张幻灯片，但不适用于其他幻灯片

Question

这是我的 HTML:

<div class="container">
  <div id="carousel-fade" class="carousel carousel-fade" data-ride="carousel" data-interval="4000">
    <ol class="carousel-indicators">
      <li data-target="#carousel-fade" data-slide-to="0" class="active"></li>
      <li data-target="#carousel-fade" data-slide-to="1"></li>
      <li data-target="#carousel-fade" data-slide-to="2"></li>
    </ol>
    <div class="carousel-inner embed-responsive embed-responsive-16by9" role="listbox">
      <div class="carousel-item embed-responsive-item active">
        <img class="d-block w-100" src="http://via.placeholder.com/1000x1500" alt="First slide">
        <div class="carousel-caption embed-responsive-item">
          <img class="img-fluid" src="http://via.placeholder.com/350x150" alt="logo">
          <a class="myButton" href="#">SERVICES</a><a class="myButton" href="#">CONTACT US</a>
        </div>
      </div>
      <div class="carousel-item embed-responsive-item">
        <img class="d-block w-100" src="http://via.placeholder.com/1000x1500" alt="Second slide">
        <div class="carousel-caption embed-responsive-item">
          <img class="img-fluid" src="http://via.placeholder.com/350x150" alt="logo">
          <a class="myButton" href="#">SERVICES</a><a class="myButton" href="#">CONTACT US</a>
        </div>
      </div>
      <div class="carousel-item embed-responsive-item">
        <img class="d-block w-100" src="http://via.placeholder.com/1000x1500" alt="Third slide">
        <div class="carousel-caption embed-responsive-item">
          <img class="img-fluid" src="http://via.placeholder.com/350x150" alt="logo">
          <a class="myButton" href="#">SERVICES</a><a class="myButton" href="#">CONTACT US</a>
        </div>
      </div>
    </div>
    <a class="carousel-control-prev" href="#carousel-fade" role="button" data-slide="prev">
      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="carousel-control-next" href="#carousel-fade" role="button" data-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>
</div>

这是我的 CSS:

.carousel {
  margin-bottom: -40px !important; }

.carousel-caption {
  bottom: 300px !important;
  font-size: 2em;
  padding-bottom: 20px !important;
  padding-top: 20px !important; 
  vertical-align: center;
}

.carousel-caption > p {
  font-size: 0.7em; }

.carousel-caption > .myButton {
  color: #E8E8E8;
  z-index: 100;
  text-decoration: none;
  display: inline-block;
  border: 2px solid #E8E8E8;
  padding: 0 26px;
  height: 40px;
  min-width: 150px;
  line-height: 36px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  border-radius: 0;
  transition: all 0.3s ease;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  margin-right: 8px;
  margin-bottom: 24px;
  background: none; 
}

.carousel-caption > .myButton:hover {
  color: #11190E;
  background: #E8E8E8; 
}

.carousel.carousel-fade .carousel-item {
  display: block;
  opacity: 0;
  transition: opacity ease-out .7s;
}

.carousel.carousel-fade .carousel-item.active {
  opacity: 1 !important;
}

这里还有一个代码笔链接，https://codepen.io/JamieBullock87/full/vRbybv/

我使用的是 bootstrap 4，并且有一个从幻灯片到幻灯片逐渐淡出的图像轮播。我有一个 Logo 和两个按钮作为轮播字幕，它们显示在滑动图像的前面。我在按钮上设置了 :hover css 动画，但它们只在最后一张幻灯片 (3) 上触发，当你将鼠标悬停在按钮上时，当轮播在幻灯片 1+2 上时没有任何反应，但在最后一张幻灯片上完美运行.

我无计可施，因为每张幻灯片的代码都完全相同，有人可以帮我解决我在这里遗漏的问题吗？

干杯

J

Answer 1

从 .carousel.carousel-fade .carousel-item{} 中移除 display:block

这是 fiddle

.carousel {
  margin-bottom: -40px !important; }

.carousel-caption {
  bottom: 300px !important;
  font-size: 2em;
  padding-bottom: 20px !important;
  padding-top: 20px !important; 
  vertical-align: center;
}

.carousel-caption > p {
  font-size: 0.7em; }

.carousel-caption > .myButton {
  color: #E8E8E8;
  z-index: 100;
  text-decoration: none;
  display: inline-block;
  border: 2px solid #E8E8E8;
  padding: 0 26px;
  height: 40px;
  min-width: 150px;
  line-height: 36px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  border-radius: 0;
  transition: all 0.3s ease;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  margin-right: 8px;
  margin-bottom: 24px;
  background: none; 
}

.carousel-caption > .myButton:hover {
  color: #11190E;
  background: #E8E8E8; 
}

.carousel.carousel-fade .carousel-item {
  opacity: 0;
  transition: opacity ease-out .7s;
}

.carousel.carousel-fade .carousel-item.active {
  opacity: 1 !important;
}

<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
 	  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div class="container">
  <div id="carousel-fade" class="carousel carousel-fade" data-ride="carousel" data-interval="4000">
    <ol class="carousel-indicators">
      <li data-target="#carousel-fade" data-slide-to="0" class="active"></li>
      <li data-target="#carousel-fade" data-slide-to="1"></li>
      <li data-target="#carousel-fade" data-slide-to="2"></li>
    </ol>
    <div class="carousel-inner embed-responsive embed-responsive-16by9" role="listbox">
      <div class="carousel-item embed-responsive-item active">
        <img class="d-block w-100" src="http://via.placeholder.com/1000x1500" alt="First slide">
        <div class="carousel-caption embed-responsive-item">
          <img class="img-fluid" src="http://via.placeholder.com/350x150" alt="logo">
          <a class="myButton" href="#">SERVICES</a><a class="myButton" href="#">CONTACT US</a>
        </div>
      </div>
      <div class="carousel-item embed-responsive-item">
        <img class="d-block w-100" src="http://via.placeholder.com/1000x1500" alt="Second slide">
        <div class="carousel-caption embed-responsive-item">
          <img class="img-fluid" src="http://via.placeholder.com/350x150" alt="logo">
          <a class="myButton" href="#">SERVICES</a><a class="myButton" href="#">CONTACT US</a>
        </div>
      </div>
      <div class="carousel-item embed-responsive-item">
        <img class="d-block w-100" src="http://via.placeholder.com/1000x1500" alt="Third slide">
        <div class="carousel-caption embed-responsive-item">
          <img class="img-fluid" src="http://via.placeholder.com/350x150" alt="logo">
          <a class="myButton" href="#">SERVICES</a><a class="myButton" href="#">CONTACT US</a>
        </div>
      </div>
    </div>
    <a class="carousel-control-prev" href="#carousel-fade" role="button" data-slide="prev">
      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="carousel-control-next" href="#carousel-fade" role="button" data-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>
</div>