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在旋转木马上淡出？

1 个答案: