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

时间：2018-04-10 11:59:27

标签： html css twitter-bootstrap

这是我的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;
}

Heres也是一个代码链接，https://codepen.io/JamieBullock87/full/vRbybv/

我使用bootstrap 4，并有一个图像轮播，从幻灯片到幻灯片逐渐消失。我有一个徽标和两个按钮作为旋转木马字幕，显示在滑动图像的前面。 我已设置：在按钮上悬停css动画，但它们仅在最后一张幻灯片（3）时触发，当您将旋转木马悬停在按钮上时幻灯片1 + 2没有任何反应，但在最后一张幻灯片上完美运行。

我在我的智慧结束，因为每张幻灯片的代码完全相同，有人能帮我解决我在这里缺少的内容吗？

干杯

Ĵ

1 个答案:

答案 0 :(得分：1)

从display:block

中删除.carousel.carousel-fade .carousel-item{}

以下是fiddle

＆＃13;
＆＃13; 
.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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题