Как сделать чтобы hover эффект не лагал при скролле и у кнопки работал cursor pointer?
Не знаю как это продемонстрировать, запись экрана ноута не показывает лаги при скролле, а на телефоне видно плохо. Могу только сказать что лаги выражаются в мигании, видимо при скролле ховер эффект на миллисекунду пропадает и сразу появляется и в моменты когда он пропадает, у кнопки начинает работать cursor pointer
|
1 |
import React, {useEffect, useRef, useState} from 'react'; import './Fetured.css' import one from '../../../assets/one.png' import two from '../../../assets/2.png' import three from '../../../assets/3.png' import four from '../../../assets/4.png' import five from '../../../assets/5.png' import six from '../../../assets/6.png' export default () => { const photosArr = [ one, two, three, four, five, six ] return ( <div className='container'> <h3 className='section__title'>Fetured Items</h3> <p className='section__subtitle'>Shop for items based on what we featured in this week</p> <div className="card__box"> {photosArr.map((img) => { return <div className="card"> <div className="card__img__test"> <img className='card__img' src={img} alt=""/> <div className="card__hover"> <button className="card__hover__button">Add to Cart</button> </div> </div> <div className="text-box"> <h3 className='card__title'>Куртка гучи</h3> <p className='card__description'>Known for her sculptural takes on traditional tailoring, Australian arbiter of cool Kym Ellery teams up with Moda Operandi.</p> <p className='card__price'>1541552$</p> </div> </div> })} </div> <button className="showMore">Browse All Product</button> </div> ); }; <code lang="css"> .card__box { display: grid; grid-template-columns: 360px 360px 360px; grid-template-rows: 581px; grid-column-gap: 30px; grid-row-gap: 30px; margin: 0 35px; margin-bottom: 48px; } .card { background-color: #F8F8F8; display: flex; flex-direction: column; text-align: left; } .card__img__test { position: relative; } .card__img { margin-bottom: 24px; } .d1 { display: flex !important; } .card__img:hover + .card__hover { display: flex; } .card__hover { width: 360px; height: 420px; background-color: rgba(58, 56, 56, 0.86); position: absolute; top: 0; left: 0; display: none; align-items: center; justify-content: center; } .card__hover__button { width: 138px; height: 43px; display: block; background-color: transparent; border: 1px solid rgba(255, 255, 255, 1); font-family: Lato, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 17px; color: white; cursor: pointer; } </code> |
Дополнительно:
1. Замените абсолют на грид.
2. Задайте кнопке свойства в обычный селектор, без наведения. Скройте.
3. При наведении пишите только изменяющиеся свойства. Можно скрыть не только через display: none, а, например, через opacity или visibility.
p.s. c БЭМ и названиями классов бы разобраться, а то сейчас дичь: блок внутри своего же элемента.
card__hover__button и card__img__test - это вообще черт знает кто.
И т.д.
card__hover - это, похоже, просто лишнее.
И имеет смысл избавится от important в собственном коде.
Для решения данной проблемы вы можете воспользоваться услугами фрилансеров. Мы выполним необходимую работу быстро и качественно.
Оставить комментарий Отменить
Ответы
- Есть ответ! к записи Как уменьшить масштаб меньше 100% в Windows 10 (22H2)
- Есть ответ! к записи Аналоги CloudFlare в России?
- Есть ответ! к записи Аналоги CloudFlare в России?
- Есть ответ! к записи Как называется человек, который дизайн придумает для сайта и сверстает его?
- Есть ответ! к записи Можно ли установить Яндекс.Диск на АльтЛинукс?
- Есть ответ! к записи Картинки мутные только на сафари, есть выход?
- Есть ответ! к записи Keenetic. Как настроить SSTP клиент с сертификатом?
- Есть ответ! к записи Чем заменить executor в aiogram 3?
Для того чтобы избежать лагов при скролле и обеспечить работу эффекта hover и cursor pointer на кнопке, можно использовать следующий подход:
1. Для hover эффекта можно использовать псевдокласс :hover в CSS. Однако, иногда это может вызывать лаги при скроллинге страницы, особенно при большом количестве элементов с таким эффектом. Для улучшения производительности рекомендуется использовать аппаратное ускорение с помощью свойства transform: translateZ(0);. Таким образом браузер будет использовать GPU для отрисовки элементов с эффектом hover, что снизит нагрузку на процессор.
2. Чтобы кнопка реагировала на наведение курсора и меняла свой стиль на cursor pointer, необходимо прописать соответствующие стили в CSS. Например:
3. Чтобы избежать возможных проблем с производительностью при скролле страницы, рекомендуется также использовать оптимизированные анимации с помощью CSS, например, transition или transform. Это позволит снизить нагрузку на браузер и обеспечить плавное выполнение анимаций.
4. Важно также следить за оптимизацией кода JavaScript, чтобы избежать лишних вычислений и операций, которые могут вызывать лаги при скролле. При необходимости можно использовать событие scroll и оптимизировать обработчики событий для улучшения производительности.
Следуя этим рекомендациям, вы сможете обеспечить плавную работу hover эффекта и курсора pointer на кнопке, даже при скроллинге страницы.