我无法让 hover 在引导轮播中工作

Question

下面是我网站的 html、js 和 css

我试图让卡片中的文本只更改 hover 上的可见性参数； 不幸的是，没有检测到 hover (?)
我的代码看起来不错，我完全不知道为什么它不起作用。 我试图在显示和可见性参数之间切换，希望问题就在那里。
我的猜测是幻灯片 function 阻止浏览器检测到 hover 但老实说，我的猜测和任何东西一样好

HTML

<!DOCTYPE html>

<html>

<head>

  <title>Restaurant Kuuhaakuu</title>
  <link rel="stylesheet" href="Style.css">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
  <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
</head>
<body>
  <div class="gtco-testimonials">
    <div class="owl-carousel owl-carousel1 owl-theme">
      <div>
        <div class="card text-center"><img class="card-img-top" src="mini_sandwich.jpg" alt="">
          <div class="card-body">
            <h5>Ronne Galle <br />
              <span> Project Manager </span>
            </h5>
            <p class="card-text">“ Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil
              impedit quo minus id quod maxime placeat ” </p>
          </div>
        </div>
      </div>
</body>

JS

(function () {
    "use strict";
  
    var carousels = function () {
      $(".owl-carousel1").owlCarousel({
        loop: true,
        center: true,
        margin: 0,
        responsiveClass: true,
        nav: false,
        responsive: {
          0: {
            items: 1,
            nav: false
          },
          680: {
            items: 2,
            nav: false,
            loop: false
          },
          1000: {
            items: 3,
            nav: true
          }
        }
      });
    };
  
    (function ($) {
      carousels();
    })(jQuery);
  })();

CSS

.gtco-testimonials {
    position: relative;
    margin-top: 30px;
    background-color: rgba(255,255,255,0.9);
}
.gtco-testimonials .owl-stage-outer {
    padding: 30px 0;
}
.gtco-testimonials .owl-nav {
    display: none;
}
.gtco-testimonials .owl-dots span {
    position: relative;
    height: 10px;
    width: 10px;
    border-radius: 50%;
    display: block;
    background: #fff;
    border: 2px solid #01b0f8;
    margin: 0 5px;
}
.gtco-testimonials .owl-dots .active {
    box-shadow: none;
}
.gtco-testimonials .owl-dots .active span {
    background: #01b0f8;
    box-shadow: none;
    height: 12px;
    width: 12px;
    margin-bottom: -1px;
}
.gtco-testimonials .card {
    background: #fff;
    box-shadow: 0 8px 30px -7px #c9dff0;
    margin: 0 20px;
    padding: 0 10px;
    border-radius: 20px;
    border: 0;
}
.gtco-testimonials .card .card-img-top {
    max-width: 100px;
    border-radius: 50%;
    margin: 15px auto 0;
    box-shadow: 0 8px 20px -4px #95abbb;
    width: 100px;
    height: 100px;
}
.gtco-testimonials .card-body{    /*this is new*/
    visibility: hidden;
}
.gtco-testimonials .card-body:hover{ /*new*/
    visibility: visible;
    background-color: aqua;
}
.gtco-testimonials .card h5 {
    color: #01b0f8;
    font-size: 21px;
    line-height: 1.3;
}

Answer 1

看看此代码是否对您有帮助... 将鼠标悬停在图像上时，会出现说明。 我清理了您的一些代码，因为它的样式没有任何好处。

CSS

.owl-carousel {
  display: block !important;
}

.gtco-testimonials {
  position: relative;
  margin-top: 30px;
  background-color: rgba(255,255,255,0.9);
}

.gtco-testimonials .card {
  background: #fff;
  box-shadow: 0 8px 30px -7px #c9dff0;
  margin: 0 20px;
  padding: 0 10px;
  border-radius: 20px;
  border: 0;
}

.gtco-testimonials .card .card-img-top {
  max-width: 100px;
  border-radius: 50%;
  margin: 15px auto 0;
  box-shadow: 0 8px 20px -4px #95abbb;
  width: 100px;
  height: 100px;
}

.gtco-testimonials .card h5 {
  color: #01b0f8;
  font-size: 21px;
  line-height: 1.3;
}

JS

$(window).load(function( event ) {
  $( ".card-body h5" ).hide()
  $( ".card-body p" ).hide()
});

$( ".card-img-top" ).mousemove(function( event ) {
  $( ".card-body h5" ).show()
  $( ".card-body p" ).show()
});

$( ".card-img-top" ).mouseout(function( event ) {
  $( ".card-body h5" ).hide()
  $( ".card-body p" ).hide()
});

HTML

<!DOCTYPE html>

<html>

<head>

  <title>Restaurant Kuuhaakuu</title>
  <link rel="stylesheet" href="Style.css">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
</head>
<body>
  <div class="gtco-testimonials">
    <div class="owl-carousel owl-carousel1 owl-theme">
      <div class="card text-center"><img class="card-img-top" src="mini_sandwich.jpg" alt="">
        <div class="card-body">
          <h5>Ronne Galle <br />
            <span> Project Manager </span>
          </h5>
          <p class="card-text">“ Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil
            impedit quo minus id quod maxime placeat ” 
          </p>
        </div>
      </div>
    </div>
  </div>

  <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>

鼠标悬停在 JS 中，它必须嵌入在 HTML 中，因为我把它遗漏了

如果这个答案对您有帮助，请接受。

我无法让 hover 在引导轮播中工作

问题描述

1 个解决方案

解决方案1
0 2021-11-28 15:05:59

我无法让 hover 在引导轮播中工作

问题描述

1 个解决方案

解决方案1 0 2021-11-28 15:05:59

解决方案1
0 2021-11-28 15:05:59