Как вернуть блок в первоначальное состояние при отведении мыши?
Подскажите пожалуйста как сделать так, чтобы когда от карточки товара отводить мышь, картинка возвращалась на первый слайд как на этом сайте https://max-demo.ru/catalog/transport/?PAGEN_1=2 ?такое вообще возможно сделать на чистом javascript? В консоли у них не нашел как они такое сделали. Код этих превьюшек я написал, но как сделать чтобы при отведении от карточки всегда слайд возвращался на первый не могу понять. Спасибо
Дополнительно:
Вы значение двух переменных не знаете как местами поменять?
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> body { background: #6e28d9; padding: 0 24px; margin: 0; height: 100vh; color: white; display: flex; justify-content: center; align-items: center; } </style> </head> <body> <script>window.onload = function () { em = document.querySelector(".block"); em.onmouseover = function () { this.innerHTML = "да"; } em.onmouseout = function () { this.innerHTML = "Видно?"; } }</script> <div class="block" style="display:block;background-color:black;border-radius:3vh;width:7vw;height:20vh;padding:5vh 1vw 1vh 1vw;text-align:center;font-size:80%;"> Видно?</div> </body> </html> |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> body { background: #6e28d9; padding: 0 24px; margin: 0; height: 100vh; color: white; display: flex; justify-content: center; align-items: center; } </style> </head> <body> <script>window.onload = function () { em = document.querySelector(".block"); em.onmouseover = function () { this.innerHTML = "да"; } em.onmouseout = function () { this.innerHTML = "Видно?"; } }</script> <div class="block" style="display:block;background-color:black;border-radius:3vh;width:7vw;height:20vh;padding:5vh 1vw 1vh 1vw;text-align:center;font-size:80%;"> Видно?</div> </body> </html>
Ответы:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> body { background: #6e28d9; padding: 0 24px; margin: 0; height: 100vh; color: white; display: flex; justify-content: center; align-items: center; } </style> </head> <body> <script>window.onload = function () { em = document.querySelector(".block"); em.onmouseover = function () { this.innerHTML = "да"; } em.onmouseout = function () { this.innerHTML = "Видно?"; } }</script> <div class="block" style="display:block;background-color:black;border-radius:3vh;width:7vw;height:20vh;padding:5vh 1vw 1vh 1vw;text-align:center;font-size:80%;"> Видно?</div> </body> </html> |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> body { background: #6e28d9; padding: 0 24px; margin: 0; height: 100vh; color: white; display: flex; justify-content: center; align-items: center; } </style> </head> <body> <script>window.onload = function () { em = document.querySelector(".block"); em.onmouseover = function () { this.innerHTML = "да"; } em.onmouseout = function () { this.innerHTML = "Видно?"; } }</script> <div class="block" style="display:block;background-color:black;border-radius:3vh;width:7vw;height:20vh;padding:5vh 1vw 1vh 1vw;text-align:center;font-size:80%;"> Видно?</div> </body> </html>
В данном случае текст, но можно и картинку. Главное знать сами фото, можно по ИД через url, по типу /imgs/id/state, или в json загрузить по ид по типу {im1: ['img_em', 'img_em']}.
Желательно в самом элементе прописывать. Если на php.
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для того чтобы вернуть блок в первоначальное состояние при отведении мыши, можно использовать JavaScript события. В данном случае, мы можем применить события `mouseover` и `mouseout` для обработки наведения и отведения мыши соответственно.
Пример кода на JavaScript:
// Получаем элемент, который хотим анимировать var block = document.getElementById('myBlock'); // Сохраняем первоначальные стили блока var originalStyles = { backgroundColor: block.style.backgroundColor, color: block.style.color }; // Обработчик события наведения мыши block.addEventListener('mouseover', function() { // Изменяем стили при наведении мыши block.style.backgroundColor = 'blue'; block.style.color = 'white'; }); // Обработчик события отведения мыши block.addEventListener('mouseout', function() { // Возвращаем блок в первоначальное состояние block.style.backgroundColor = originalStyles.backgroundColor; block.style.color = originalStyles.color; });
В этом примере мы сохраняем первоначальные стили блока в объект `originalStyles`, затем при наведении мыши меняем стили блока, а при отведении возвращаем блок в первоначальное состояние.
Таким образом, используя события `mouseover` и `mouseout`, мы можем легко реализовать возвращение блока в первоначальное состояние при отведении мыши.