Jquery mouseover, который переставляет классы внутри div, а затем сбрасывается с помощью mouseleave

Question

РЕДАКТИРОВАТЬ - правильное решение можно найти здесь .Отход от предложения Таплара .Я сделал два дополнительных класса, которые дублируют активное и неактивное, но с! Важным свойством.

Исходное сообщение

Я новичок в мире программирования и схожу с ума, пытаясьвыяснить это.Я обнаружил и пытаюсь изменить этот код, размещенный по адресу Codepen .

При загрузке я хотел бы, чтобы отображение .premium было «активным», а отображение .standard и .platinum - как «неактивный'.Затем, при помощи mouseover (), переставьте классы таким образом, чтобы у того, что было наведено, был класс «активный», а остальные «неактивные».И, наконец, при срабатывании mouseleave () сбрасывает каждый div к исходному по умолчанию, активному и неактивному.

HTML

<section class="pen">
        <div class="plans">
            <div class="plandis standard inactive"></div>
            <div class="plandis premium active"></div>
            <div class="plandis platinum inactive"></div>
     </div>
</section>

CSS

.pen {
  max-width: 635px;
  width: 100%;
  margin: 50px auto 0;
  opacity: 0;
  position: relative;
  -webkit-transition: all 0.25s ease-in-out;
  -moz-transition: all 0.25s ease-in-out;
  -ms-transition: all 0.25s ease-in-out;
  -o-transition: all 0.25s ease-in-out;
  transition: all 0.25s ease-in-out;
  -webkit-animation: 1s appear 1 forwards;
  -moz-animation: 1s appear 1 forwards;
  -o-animation: 1s appear 1 forwards;
  animation: 1s appear 1 forwards;
}
.plans {
  max-width: 635px;
  width: 100%;
  height: 400px;
  -webkit-transition: all 0.25s ease-in-out;
  -moz-transition: all 0.25s ease-in-out;
  -ms-transition: all 0.25s ease-in-out;
  -o-transition: all 0.25s ease-in-out;
  transition: all 0.25s ease-in-out;
}
.plandis {
  width: 202px;
  -webkit-transform-origin: 50% 50%;
  -moz-transform-origin: 50% 50%;
  -ms-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
  height: inherit;
  margin: 0 7px 0 0;
  display: inline-block;
  -webkit-transition: all 0.25s ease-in-out;
  -moz-transition: all 0.25s ease-in-out;
  -ms-transition: all 0.25s ease-in-out;
  -o-transition: all 0.25s ease-in-out;
  transition: all 0.25s ease-in-out;
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}
.plandis.active {
  width: 282px;
  -webkit-transition: all 0.25s ease-in-out;
  -moz-transition: all 0.25s ease-in-out;
  -ms-transition: all 0.25s ease-in-out;
  -o-transition: all 0.25s ease-in-out;
  transition: all 0.25s ease-in-out;
}
.plandis.inactive {
  width: 162px;
  -webkit-transition: all 0.25s ease-in-out;
  -moz-transition: all 0.25s ease-in-out;
  -ms-transition: all 0.25s ease-in-out;
  -o-transition: all 0.25s ease-in-out;
  transition: all 0.25s ease-in-out;
  opacity: 0.4;
}
.plandis.premium {
  background-color:red;
  background-size: cover;
}
.plandis.standard {
  background-color:blue;
  background-size: cover;
}
.plandis.platinum {
  background-color:green;
  background-size: cover;
}
.plandis:last-of-type {
  margin: 0;
}
@media all and (min-width: 900px) {
  .pen {
    max-width: 890px;
  }
  .plandis {
    width: 286px;
  }
  .plandis.inactive {
    width: 246px;
  }
  .plandis.active {
    width: 366px;
  }
  .plans {
    max-width: 890px;
    height: 600px;
  }
}
@media all and (max-width: 660px) {
  .pen {
    max-width: 335px;
  }
  .plandis {
    width: 101px;
  }
  .plandis.inactive {
    width: 61px;
  }
  .plandis.active {
    width: 181px;
  }
  .plans {
    max-width: 335px;
  }
}
@-webkit-keyframes appear {
  15% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-moz-keyframes appear {
  15% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-o-keyframes appear {
  15% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes appear {
  15% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

JS

$('.plandis').each(function() {
    $(this).mouseover(function() {
        $(this).addClass('active');
        $('.plans').children('.plandis').not('.active').addClass('inactive');
    });
    $(this).mouseleave(function() {
        $(this).removeClass('active');
        $('.plans').children('.plandis').not('.active').removeClass('inactive');
    });
});

Я пытался манипулировать кодом несколько раз, но безрезультатно.Надеюсь, кто-нибудь сможет мне помочь!

Answer 1

Правильное решение можно найти здесь .Отход от предложения Таплара .Я создал два дополнительных класса, которые дублируют активные и неактивные классы, но имеют свойство! Important.

HTML

$('.plandis').each(function() {
  $(this).mouseover(function() {
    $(this).addClass('activejq');
    $('.plans').children('.plandis').not('.activejq').addClass('inactivejq');
  });
  $(this).mouseleave(function() {
    $(this).removeClass('activejq');
    $('.plans').children('.plandis').not('.activejq').removeClass('inactivejq');
  });
});

body {
  background: #000000;
}

.pen {
  width: 100%;
  margin: 50px auto 0;
  opacity: 0;
  position: relative;
  -webkit-transition: all 0.25s ease-in-out;
  -moz-transition: all 0.25s ease-in-out;
  -ms-transition: all 0.25s ease-in-out;
  -o-transition: all 0.25s ease-in-out;
  transition: all 0.25s ease-in-out;
  -webkit-animation: 1s appear 1 forwards;
  -moz-animation: 1s appear 1 forwards;
  -o-animation: 1s appear 1 forwards;
  animation: 1s appear 1 forwards;
}

.plans {
  max-width: 635px;
  width: 100%;
  height: 400px;
  -webkit-transition: all 0.25s ease-in-out;
  -moz-transition: all 0.25s ease-in-out;
  -ms-transition: all 0.25s ease-in-out;
  -o-transition: all 0.25s ease-in-out;
  transition: all 0.25s ease-in-out;
}

.plandis {
  -webkit-transform-origin: 50% 50%;
  -moz-transform-origin: 50% 50%;
  -ms-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
  height: inherit;
  margin: 0 7px 0 0;
  display: inline-block;
  -webkit-transition: all 0.25s ease-in-out;
  -moz-transition: all 0.25s ease-in-out;
  -ms-transition: all 0.25s ease-in-out;
  -o-transition: all 0.25s ease-in-out;
  transition: all 0.25s ease-in-out;
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

.active {
  width: 282px;
  opacity: 1;
}

.inactive {
  width: 162px;
  opacity: 0.4;
}

.inactivejq {
  width: 246px !important;
  -webkit-transition: all 0.25s ease-in-out;
  -moz-transition: all 0.25s ease-in-out;
  -ms-transition: all 0.25s ease-in-out;
  -o-transition: all 0.25s ease-in-out;
  transition: all 0.25s ease-in-out;
  opacity: 0.4;
}

.activejq {
  width: 366px !important;
  -webkit-transition: all 0.25s ease-in-out;
  -moz-transition: all 0.25s ease-in-out;
  -ms-transition: all 0.25s ease-in-out;
  -o-transition: all 0.25s ease-in-out;
  transition: all 0.25s ease-in-out;
  opacity: 1;
}

.plandis.premium {
  background-color: red;
  background-size: cover;
}

.plandis.standard {
  background-color: blue;
  background-size: cover;
}

.plandis.platinum {
  background-color: green;
  background-size: cover;
}

.plandis:last-of-type {
  margin: 0;
}

@media all and (min-width: 900px) {
  .pen {
    max-width: 890px;
  }
  .plandis {
    width: 286px;
  }
  .inactive {
    width: 246px;
  }
  .active {
    width: 366px;
  }
  .plans {
    max-width: 890px;
    height: 600px;
  }
}

@media all and (max-width: 660px) {
  .pen {
    max-width: 335px;
  }
  .plandis {
    width: 101px;
  }
  .inactive {
    width: 61px;
  }
  .active {
    width: 181px;
  }
  .inactivejq {
    width: 61px !important;
  }
  .activejq {
    width: 181px !important;
  }
  .plans {
    max-width: 335px;
  }
}

@-webkit-keyframes appear {
  15% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@-moz-keyframes appear {
  15% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@-o-keyframes appear {
  15% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes appear {
  15% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<body>
  <section class="pen">
    <div class="plans">
      <div class="plandis standard inactive"></div>
      <div class="plandis premium active"></div>
      <div class="plandis platinum inactive"></div>
    </div>
  </section>
</body>

</html>

Answer 2

Я пошел об этом предложенном решении немного по-другому.Вместо того, чтобы переключать активные и неактивные классы, я добавил третий класс «ignore».

.plandis.active:not(.ignore),
.plandis.inactive:hover {
}

Правило css для active было изменено, чтобы также проверить, что элемент не имеет класса ignore.Кроме того, элемент должен быть активным, если он inactive, но находится на нем.

В этот момент нам просто нужно добавить класс игнорирования к любому активному элементу, над которым мы сейчас не находимся.

var $allPlandis = $('.plandis')
  .on('mouseenter', function() {
    $allPlandis.not(this).filter('.active').addClass('ignore');
  })
  .on('mouseleave', function() {
    $allPlandis.filter('.ignore').removeClass('ignore');
  });

.pen {
  max-width: 635px;
  width: 100%;
  margin: 50px auto 0;
  opacity: 0;
  position: relative;
  -webkit-transition: all 0.25s ease-in-out;
  -moz-transition: all 0.25s ease-in-out;
  -ms-transition: all 0.25s ease-in-out;
  -o-transition: all 0.25s ease-in-out;
  transition: all 0.25s ease-in-out;
  -webkit-animation: 1s appear 1 forwards;
  -moz-animation: 1s appear 1 forwards;
  -o-animation: 1s appear 1 forwards;
  animation: 1s appear 1 forwards;
}

.plans {
  max-width: 635px;
  width: 100%;
  height: 400px;
  -webkit-transition: all 0.25s ease-in-out;
  -moz-transition: all 0.25s ease-in-out;
  -ms-transition: all 0.25s ease-in-out;
  -o-transition: all 0.25s ease-in-out;
  transition: all 0.25s ease-in-out;
}

.plandis {
  width: 202px;
  -webkit-transform-origin: 50% 50%;
  -moz-transform-origin: 50% 50%;
  -ms-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
  height: inherit;
  margin: 0 7px 0 0;
  display: inline-block;
  -webkit-transition: all 0.25s ease-in-out;
  -moz-transition: all 0.25s ease-in-out;
  -ms-transition: all 0.25s ease-in-out;
  -o-transition: all 0.25s ease-in-out;
  transition: all 0.25s ease-in-out;
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

.plandis.active:not(.ignore),
.plandis.inactive:hover {
  width: 282px;
  -webkit-transition: all 0.25s ease-in-out;
  -moz-transition: all 0.25s ease-in-out;
  -ms-transition: all 0.25s ease-in-out;
  -o-transition: all 0.25s ease-in-out;
  transition: all 0.25s ease-in-out;
}

.plandis.inactive {
  width: 162px;
  -webkit-transition: all 0.25s ease-in-out;
  -moz-transition: all 0.25s ease-in-out;
  -ms-transition: all 0.25s ease-in-out;
  -o-transition: all 0.25s ease-in-out;
  transition: all 0.25s ease-in-out;
  opacity: 0.4;
}

.plandis.premium {
  background-color: red;
  background-size: cover;
}

.plandis.standard {
  background-color: blue;
  background-size: cover;
}

.plandis.platinum {
  background-color: green;
  background-size: cover;
}

.plandis:last-of-type {
  margin: 0;
}

@media all and (min-width: 900px) {
  .pen {
    max-width: 890px;
  }
  .plandis {
    width: 286px;
  }
  .plandis.inactive {
    width: 246px;
  }
  .plandis.active {
    width: 366px;
  }
  .plans {
    max-width: 890px;
    height: 600px;
  }
}

@media all and (max-width: 660px) {
  .pen {
    max-width: 335px;
  }
  .plandis {
    width: 101px;
  }
  .plandis.inactive {
    width: 61px;
  }
  .plandis.active {
    width: 181px;
  }
  .plans {
    max-width: 335px;
  }
}

@-webkit-keyframes appear {
  15% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@-moz-keyframes appear {
  15% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@-o-keyframes appear {
  15% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes appear {
  15% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="pen">
  <div class="plans">
    <div class="plandis standard inactive"></div>
    <div class="plandis premium active"></div>
    <div class="plandis platinum inactive"></div>
  </div>
</section>

Кажется, что здесь работает бегунок фрагмента, однако есть некоторая странность отображения с CSS, так как он делает первый активным, а второй - активным.неактивный переводит третий элемент на страницу, а не остается на одной строке.