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

Question

bellow is my website's html, js and css下面是我网站的 html、js 和 css

i'm trying to get the text in the card to only change the visibilty parameter on hover;我试图让卡片中的文本只更改 hover 上的可见性参数； Unfortunately the hover isn't detected (?)不幸的是，没有检测到 hover (?)
my code seems fine and i geniuenly have no idea why it isn't working.我的代码看起来不错，我完全不知道为什么它不起作用。 I tried to switch between display and visibility parameters in hopes that the porblems lies there.我试图在显示和可见性参数之间切换，希望问题就在那里。
My guess is that the slide function stops the browser from detecting the hover but honestly my guess is as good as anything我的猜测是幻灯片 function 阻止浏览器检测到 hover 但老实说，我的猜测和任何东西一样好

HTML 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 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 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

See if this code helps you... When hovering over the image, the description appears.看看此代码是否对您有帮助... 将鼠标悬停在图像上时，会出现说明。 I cleaned up some of your code as it had stylings that didn't do any good.我清理了您的一些代码，因为它的样式没有任何好处。

CSS 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 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 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>

The mouse over catch is in the JS and it has to be embedded in the HTML because I left it out鼠标悬停在 JS 中，它必须嵌入在 HTML 中，因为我把它遗漏了

If this answer helps you, accept it.如果这个答案对您有帮助，请接受。

我无法让 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