如何让 divbox 在轮播上淡入淡出？

Question

目前我有一个包含 3 个图像的旋转木马，这些图像在悬停时停止并显示黑色轮廓。我的问题是，我想让一个 divbox 淡入而不是轮廓。是否有可能或者我可以采取任何解决方法来实现我的目标？

我的HTML

<!--anfang Slider mit 3 bildern-->
<div id="myCarousel" class="carousel slide" data-ride="carousel">
  <!-- Die Punkte zur navigation -->
  <ol class="carousel-indicators">
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
    <li data-target="#myCarousel" data-slide-to="1"></li>
    <li data-target="#myCarousel" data-slide-to="2"></li>
  </ol>
  <!--Die einzelenen Bilder-->
    <div class="carousel-inner" role="listbox">
        <div class="item active">
        <img class="carousel-img" src="img/bild1.png" alt="Bild1">
        </div>

        <div class="item">
        <img class="carousel-img" src="img/bild1.png" alt="Bild2">
        </div>

        <div class="item">
        <img class="carousel-img" src="img/bild1.png" alt="Bild3">
        </div>
        </div>
    </div>
    <!--ende Slider mit 3 bildern-->
    <!--Hover div-->
        <div class="carousel-text">
        </div>
    <!--ende Hover div-->

我的CSS

.carousel-img:hover {
  margin-top: 1%;
  margin-left: 1%;
  border: 10px solid black;
  margin: 0 auto;
  width: 100%;
  z-index: -999;
}

.carousel-text {
  background-color: rgb(196 / 23 / 19);
  margin-top: 1%;
  margin-left: 1%;
  opacity: 1;
  height: 75%;
  width: 33%;
  z-index: 998;
  visibility: visible;
}

我所有的CSS类都已经达到了标准Bootstrap.css

Answer 1

只需使用下一个选择器：

HTML

<div class="carousel-inner" role="listbox">
    <div class="item active">
        <img class="carousel-img" src="img/bild1.png" alt="Bild1">
        <div class="carousel-caption"></div>/* your fade-in div */
    <div

    <div class="item">
        <img class="carousel-img" src="img/bild1.png" alt="Bild2">
        <div class="carousel-caption"></div>/* your fade-in div */
    </div>

    <div class="item">
        <img class="carousel-img" src="img/bild1.png" alt="Bild3">
        <div class="carousel-caption"></div>/* your fade-in div */
    </div>
</div>

CSS

.carousel-img:hover {
  margin-top: 1%;
  margin-left: 1%;
  /*border: 10px solid black;*/
  margin: 0 auto;
  width: 100%;
  z-index: -999;
}
.carousel-caption {
    transition: opacity 1s;
    opacity: 0;
}
/* targets any .carousel-caption after hovered images */
.carousel-img:hover + .carousel-caption {
    opacity: 1;
}

然后您可以根据自己的喜好设置 .carousel-caption 的样式。

如何让 divbox 在轮播上淡入淡出？

How can I make a divbox fade in over a carousel?

html

css

hover

carousel

twitter-bootstrap