-1

Попытался свою ситуацию воспроизвести в codepen-е. Ниже - запускаемый код.
Принцип такой:

  1. Ховерете красный квадратик, он расширяется.
  2. Как расширился, кликаете по центру, после клика не отводить курсор.
  3. После клика появился другой квадратик на месте красного, его прежних размеров. Если попытаться повертеть мышкой по этому квадратику, то ховер с красного пропадет, и он уменьшится в размерах.

Так вот, как после клика завершить ховер на красном квадрате, чтобы его транзишн вернулся в исходное положение? Если не вертеть мышкой, красный квадратик так и будет показываться после клика.
Разметку менять никак нельзя, рассчитываю на решение через js на 90%, остальное - css, но тут уже вряд ли он сможет помочь...

$(".one, .two").click(function(){
  $(".two").toggleClass('show');
});
html {
  height: 100%;
}
html body {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
  position: relative;
  height: 100%;
}
html body span {
  display: block;
  width: 100px;
  height: 100px;
  transition: all 300ms ease 0s;
}
html body .one {
  background-color: red;
}
html body .one:hover {
  width: 120px;
  height: 120px;
}
html body .two {
  position: absolute;
  background-color: blue;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  opacity: 0;
  visibility: hidden;
}
html body .two.show {
  opacity: 0.5;
  visibility: visible;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="one"></span>
<span class="two"></span>

5
  • самое простое - добавить по клику класс настройки которого будут перебивать настройки hover
    – Grundy
    24 янв 2017 в 19:53
  • Grudy, и так там уже класс на классе классом погоняет, не хотелось бы всё на классах завязывать... Я предположил, что есть какой-нибудь обработчик на js для этого. Разве нет?
    – wokalek
    24 янв 2017 в 19:54
  • Grudy, кое-что накопал тем временем: habrahabr.ru/post/113073
    – wokalek
    24 янв 2017 в 19:56
  • @VostokSisters, прошу вас, отныне, сразу уточнять все нюансы, что бы не подставлять других пользователей
    – Yuri
    24 янв 2017 в 20:03
  • Я понял. Спасибо.
    – wokalek
    24 янв 2017 в 20:30

2 ответа 2

4

Добавляете дополнительный класс и в CSS уточняете, что увеличивать только тогда, когда у элемента нет этого класса:

$(".one, .two").click(function(){
  $(".two").toggleClass('show');
  $(".one").toggleClass('no-hover');
});
html {
  height: 100%;
}
html body {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
  position: relative;
  height: 100%;
}
html body span {
  display: block;
  width: 100px;
  height: 100px;
  transition: all 300ms ease 0s;
}
html body .one {
  background-color: red;
}
html body .one:hover:not(.no-hover) {
  width: 120px;
  height: 120px;
}
html body .two {
  position: absolute;
  background-color: blue;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  opacity: 0;
  visibility: hidden;
}
html body .two.show {
  opacity: 0.5;
  visibility: visible;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="one"></span>
<span class="two"></span>

10
  • Прекрасно работает. Думаю, пойдет. Правда не понимаю как работает :D Объясните для ребёнка эту строчку, пожалуйста: .one:hover:not(.no-hover), как она выполняется?
    – wokalek
    24 янв 2017 в 20:13
  • @VostokSisters, она означает, что нужно выполнять hover только если у элемента нету класса .no-hover
    – Yuri
    24 янв 2017 в 20:14
  • У меня в деле заместо конкретного класса .one будет конкретный тег article. Если написать .article:hover:not(.no-hover), то стиль будет применяться ко всем тегам article? Правильно понимаю работу селектора? Или это всё равно что думать, что раз написано article:hover, то ховер применяется ко всем элементом при ховере?)
    – wokalek
    24 янв 2017 в 20:26
  • @VostokSisters, hover будет применяться ко всем .article, только если у них нет класса .no-hover
    – Yuri
    24 янв 2017 в 20:28
  • А что если я хочу запретить всем article ховер, когда я уже кликнул по одному из них? Только тугглить класс всем 500 артиклам не нужно) Как тогда написать селектор?
    – wokalek
    24 янв 2017 в 21:00
1

При клике переключать класс active первому спану; добавить классу active такие же свойства, как и при ховере.

$(".one, .two").click(function(){
  $(".two").toggleClass('show');
  $(".one").toggleClass('active');
});
html {
  height: 100%;
}
html body {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
  position: relative;
  height: 100%;
}
html body span {
  display: block;
  width: 100px;
  height: 100px;
  transition: all 300ms ease 0s;
}
html body .one {
  background-color: red;
}
html body .one:hover,
html body .one.active {
  width: 120px;
  height: 120px;
}
html body .two {
  position: absolute;
  background-color: blue;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  opacity: 0;
  visibility: hidden;
}
html body .two.show {
  opacity: 0.5;
  visibility: visible;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="one"></span>
<span class="two"></span>

7
  • А почему не посоветовал просто засунуть спан в спан? То же самое бы получилось, что и у тебя. Но с моим вопросом это вообще ничего общего не имеет. Я вообще по пунктам всё расписан, но всё равно меня не поняли. Нет, менять разметку нельзя. В оригинальной проблеме спан1 - картинка, спан2 - оверлей на весь экран, что там поменять местами-то? Вспомнил как раз, что забыл js указать в теги.
    – wokalek
    24 янв 2017 в 19:51
  • Вот оригинальная проблема. Если нажать на картинку, вылезет оверлей, и если при этом НЕ убирать курсор от начал до конца, то ховер на картинке продолжет существовать. Это огорчает мои чувства перфекциониста.
    – wokalek
    24 янв 2017 в 19:53
  • Если есть какие-то строгие параметры, которые должны быть соблюдены, то стоит написать об этом явно ) Счас переделаю ответ. 24 янв 2017 в 19:55
  • Цитирую из вопроса: "Так вот, как после клика завершить ховер на красном квадрате, чтобы его транзишн вернулся в исходное положение? "
    – wokalek
    24 янв 2017 в 20:01
  • Я не придираюсь конкретно уж, такой уж вопрос... По клику - показ сиреневого квадрата, одновременно с этим - возврат в начальное состояние красного, и всё это не отводя курсора.
    – wokalek
    24 янв 2017 в 20:02

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

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