#javascript #html #jquery #css
Вопрос:
Ниже приведен 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; } lt;meta charset="utf-8"gt; lt;meta name="viewport" content="width=device-width, initial-scale=1"gt; lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css"gt; lt;link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"gt; lt;script src="https://code.jquery.com/jquery-2.2.4.min.js"gt;lt;/scriptgt; lt;script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"gt;lt;/scriptgt; lt;div class="gtco-testimonials"gt; lt;div class="owl-carousel owl-carousel1 owl-theme"gt; lt;divgt; lt;div class="card text-center"gt;lt;img class="card-img-top" src="mini_sandwich.jpg" alt=""gt; lt;div class="card-body"gt; lt;h5gt;Ronne Galle lt;br /gt; lt;spangt; Project Manager lt;/spangt; lt;/h5gt; lt;p class="card-text"gt;“ Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat ” lt;/pgt; lt;/divgt; lt;/divgt; lt;/divgt; Комментарии:
1. Не вижу никакого кода, связанного с зависанием здесь
Ответ №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
lt;!DOCTYPE htmlgt; lt;htmlgt; lt;headgt; lt;titlegt;Restaurant Kuuhaakuult;/titlegt; lt;link rel="stylesheet" href="Style.css"gt; lt;meta charset="utf-8"gt; lt;meta name="viewport" content="width=device-width, initial-scale=1"gt; lt;link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"gt; lt;/headgt; lt;bodygt; lt;div class="gtco-testimonials"gt; lt;div class="owl-carousel owl-carousel1 owl-theme"gt; lt;div class="card text-center"gt;lt;img class="card-img-top" src="mini_sandwich.jpg" alt=""gt; lt;div class="card-body"gt; lt;h5gt;Ronne Galle lt;br /gt; lt;spangt; Project Manager lt;/spangt; lt;/h5gt; lt;p class="card-text"gt;“ Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat ” lt;/pgt; lt;/divgt; lt;/divgt; lt;/divgt; lt;/divgt; lt;script src="https://code.jquery.com/jquery-2.2.4.min.js"gt;lt;/scriptgt; Указатель мыши на улов находится в JS, и он должен быть встроен в HTML, потому что я его пропустил
Если этот ответ поможет вам, примите его.
Комментарии:
1. Премного благодарен… спасибо, приятель