0

подскажите пожалуйста как правильно реализовать hover на jQuery при наведении на блок появляется такой же блок с текстом. Есть две стороны front (лицевая) и скрытая (display:none) back сторона, по на ведению на front сторону появляется плавно сторона back, убираешь с блок cursor плавно возвращается сторона front. Таких блоков может быть 4 или 6. Пытался несколькими вариантами, но все не то:

1) $('.front').mouseover(function () {
  $('.front').hide();
  $('.back').show();
});

$('.back').mouseout(function(){
  $('.front').show();
  $('.back').hide();
});

2)$('.front').mouseover(function () {
  $('.back').fadeToggle();
});

3)$(document).on('hover', 'front', function(){
  $(this).children('.front').hide();
  $(this).children('.back').show();
}
.effect {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 233px;
    z-index: 0;
}

.front,
.back {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 60px 35px;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    cursor: pointer;
}

div.business-content.front.nomination {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    padding: 45px 45px;
    background: #2B2C31;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.05);
    border-radius: 15px;
}
<div class="col-lg-6 mt_30">
<div class="box">
<div class="wrapper effect">
<div class="content front nomination">
<img class="images" src="#" alt="Agencies">
<h5 class="subheading">Agencies</h5>
</div>
<div class="back backside">
<a class="subheading subheading-modifier" href="#">Agencies</a>
<p class="text">
Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum has been the industry's standard dummy text ever since the 500s, when an unknown printer took</p>
</div>
</div>
</div>
</div>

Заранее большое спасибо.

5
  • В прошлом вопросе я вам писал про использование $(this). вот и в этот раз нужно применить уже полученные знания, но только на другой аналогичной задаче 22 дек 2021 в 10:32
  • Спасибо вам большое за помощь. Но я попробовал вашим методом, у меня ничего не получилось. 22 дек 2021 в 10:38
  • Добавь в вопрос разметку html и добавь именно те попытки, что не получились через this. ...т.к. очевидно текущие варианты не валидны по-умолчанию 22 дек 2021 в 10:40
  • Ещё, чтобы не плавать в теме: посмотри что значит this в js, что значит $(this) в jquery и что такое "контекст вызова" 22 дек 2021 в 10:47
  • Добавил html, css и что пытался jquery 22 дек 2021 в 10:54

2 ответа 2

0

.card {
  position: relative;
  width: 237px;
  height: 237px;
  transform: translate(0%, 0%);
  text-align: center;
}

.card:hover .card__front {
  transform: rotateY(180deg);
}

.card:hover .card__back {
  z-index:3;
  transform: rotateY(0deg);
}

.card__wrapper {
  position: fixed;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  transition: transform 0.6s ease-in-out;
}

.card__front {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #19181b;
}

.card__back {
  background-color: #19181b;
  transform: rotateY(180deg);
}

.card__title {
  font-weight: 500;
  font-size: 20px;
  color: #eccff6;
}
<div class="card">
  <div class="card__wrapper card__front">
    <p class="card__title">hello world</p>
  </div>
  <div class="card__wrapper card__back">
    <p class="card__title">Привет мир</p>
  </div>
</div>

Такое спокойно можно реализовать и на чистом css

1
  • Спасибо большое. Но интересует только на jquery вариант. 23 дек 2021 в 8:29
-1
$('.front').mouseover(function () {
  $('.back').show(2000);
});
$('.front').mouseout(function () {
  $('.back').hide();
});
7
  • У автора очевидно проблемы с тем, что у него несколько блоков и нужно применять функции к своему блоку 22 дек 2021 в 10:49
  • @АлексейШиманский, влепили минус не подумав? У автора 2 блока, при наведении на front должен появляться back.
    – KordDEM
    22 дек 2021 в 11:01
  • Сдались мне эти минусы ¯\_(ツ)_/¯ 22 дек 2021 в 11:08
  • пожалуйста, постарайтесь оставлять чуть более развёрнутые ответы. дополнить ответ можно, нажав править 22 дек 2021 в 11:09
  • Решение правильное. Как сделать для несколько одинаковых блоков ? Чтобы не плодить классы. 23 дек 2021 в 8:30

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.