我无法悬停在 Bootstrap 轮播中工作

Posted 2023-05-08

【中文标题】我无法悬停在 Bootstrap 轮播中工作

【英文标题】：i can't get hover to work in a Bootstrap carousel

【发布时间】：2022-01-05 15:48:31

【问题描述】：

以下是我网站的 html、JS 和 CSS。 我试图让卡片中的文本仅在悬停时更改可见性参数；不幸的是，未检测到悬停 (?) 我的代码看起来不错，我真的不知道为什么它不起作用。 我试图在显示和可见性参数之间切换，希望问题出在那儿。 我的猜测是滑动功能会阻止浏览器检测到悬停，但老实说，我的猜测和任何事情一样好。

(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);
  )();

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

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

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

【问题讨论】：

这里没有看到任何与悬停相关的代码

【参考方案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" >
        <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 中，因为我忽略了它

如果这个答案对你有帮助，请采纳。

【讨论】：

非常感谢...谢谢伙计