i can't get hover to work in a bootstrap carousel

Question

bellow is my website's html, js and css

i'm trying to get the text in the card to only change the visibilty parameter on hover; Unfortunately the hover isn't detected (?)
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

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

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

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

The mouse over catch is in the JS and it has to be embedded in the HTML because I left it out

If this answer helps you, accept it.

i can't get hover to work in a bootstrap carousel

Question

1 answers

solution1
0 2021-11-28 15:05:59

i can't get hover to work in a bootstrap carousel

Question

1 answers

solution1 0 2021-11-28 15:05:59

solution1
0 2021-11-28 15:05:59