Задать вопрос
@Hungryee
javascript

Как сделать смену содержимого блока при наведении мышкой?

Собственно есть блок с одной картинкой и несколькими словами. При наведении он поворачивается обратной стороной (весь текст фактически становится зеркальным), еще нужно, чтобы на этой "обратной" стороне было другое содержимое. Помогите, пожалуйста, начинающему.
  • Вопрос задан
  • 711 просмотров
Комментировать
Подписаться 1 Оценить Комментировать
Решения вопроса 2
SPAHI4
@SPAHI4
реактовцы - это не девы, а прокидыватели пропсов
https://davidwalsh.name/css-flip
Ответ написан
Комментировать
Комментировать
@KCT 
<!DOCTYPE html>
<html>
<head>
    <style>
.block, .front, .back {
    width: 150px;
    height: 150px;
}
.block{
    box-shadow: 0 0 5px rgba(0, 0, 0, .4);
    margin: 15px;
}
.front{
    background: green;
    transition: all .7s;
    position: absolute;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}
.back{
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
    background: red;
    transition: all .7s;
    opacity: 0;
}
.block > div:hover .front{
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);

}
.block > div:hover .back{
    -webkit-transform: rotateY(0deg);
    transform: rotateY(0deg);
    opacity: 1;
}

    </style>
</head>
<body>

<div class="block">
<div>
        <div class="front">front</div>
        <div class="back">back</div>
 </div>
</div>
</body>
</html>
Ответ написан
Комментировать
Комментировать
Пригласить эксперта
Ответы на вопрос 1
@AmadeyMinisol
full stack web-developer
отлавливаешь onmouseover (наведение курсора) + onmouseout(когда курсор ушел с блока) и собственно меняешь контент как тебе надо, в случае с jquery можно событие hover.

Если без js. то псевдоклассом :hover
Ответ написан
1 комментарий
1 комментарий
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript разработчик
SummerWeb • Ярославль
от 100 000 до 140 000 ₽
JavaScript разработчик
вАйТи
от 5 000 до 25 000 ₽
JavaScript Developer (back-end / full-stack)
Brightdata • Тель-Авив
от 5 500 до 6 500 $
Ещё вакансии
Заказы с Хабр Фриланса
Сделать бота
06 мая 2024, в 10:17
15000 руб./за проект
Оцифровать снимки карт и нанести слоями на карту в Qgis
06 мая 2024, в 10:10
15000 руб./за проект
Развернуть DJANGO проект на сервере
06 мая 2024, в 10:02
3000 руб./за проект
Ещё заказы