Почему не пропадает hover в ресайзе?

Question

[Ruslan]

Всем доброго утра, столкнулся с такой проблемой при верстке. В ресайзе, начиная с любого размера, при клике куда-либо срабатывает hover => active (все как должно быть), а потом появляется hover и не исчезает пока не кликнуть куда-то на экране... Как с этим бороться?

Вот пример бтн мобильного меню, при ресайз размере, ховер не пропадает и такое со вскеми кнопками, ссылками и т.п. на странице (в ресайзе)



Получается при клике, превращается в крестик, но hover эффекты не пропадают и крестик цвета hover и с не правильной шириной...

при ховере

после клика

Comments

[Максим]

вы ответ на самом деле хотите получить ?

[Ruslan]

Максим Ленский, да, прикинь

[Максим]

Ruslan, чудненько - тогда покажите ваш код или нам догадываться что там такое ?

[Ruslan]

Максим Ленский, Это происходит со всеми активным элементами на странице, ссылки, кнопки и т.д. Самое раздражающее бтн раскрытия мобильного меню. Это 3 спана в диве, которые при ховере немного меняют свою ширину, а при клике превращаются в крестик. Вот часть кода с ним:

html

<div class="burger-menu">
            <span id="left" class="burg"></span>
            <span id="right" class="burg"></span>
            <span id="none" class="burg"></span>
          </div>

css

burger-menu {
  display: none;
  position: relative;
  width: 30px;
  height: 23px;
  cursor: pointer;
  z-index: 30;
}

.burg {
  position: absolute;
  display: block;
  width: 100%;
  height: 3px;
  background-color: #000;
  transition: width 0.2s ease, top 0.2s ease, background-color 0.2s ease,
    transform 0.2s ease, opacity 0.2s ease;
}

.burg:nth-child(2) {
  top: 10px;
}

.burg:nth-child(3) {
  top: 20px;
}

.burger-menu:hover .burg {
  background-color: var(--main-color);
}

.burger-menu:active .burg {
  background-color: var(--active-color);
}

.burger-menu:hover .burg:nth-child(2) {
  width: 25px;
}

.burger-menu:hover .burg:nth-child(3) {
  width: 18px;
}

.burg:not(:last-child) {
  margin-bottom: 7px;
}

реализация jquery

$(".burger-menu").on("click", () => {
    $("#none").css("opacity", "0");
    $("#left").css({
      transform: "translateY(10px) rotate(45deg)",
    });
    $("#right").css({
      transform: "rotate(-45deg)",
    });

    if ($("#none").css("opacity") === "0") {
      $("#none").css("opacity", "1");
      $("#left").css("transform", "translateY(0px) rotate(0)");
      $("#right").css("transform", "rotate(0)");
    }

    $(".burger_list").slideToggle(400);
  });

[Ruslan]

Получается при клике, превращается в крестик, но hover эффекты не пропадают и крестик цвета hover и с не правильной шириной...

при ховере

после клика

[Максим]

Ruslan, ладно - залейте в песочницу - jsfiddle.net codepen.io и в тело вопроса поместите ссылку

[Ruslan]

Максим Ленский, залил, извиняюсь, что сразу не дал подробного объяснения. Просто мне казалось, что это простая и распространенная ошибка

[Максим]

Ruslan, https://codepen.io/topicstarter/pen/YzpmJVY - до 500px сожми и увидешь - так надо ?

[Ankhena]

Ruslan, Что-то я не смогла повторить в песочнице описанного вами эффекта

[Ruslan]

Максим Ленский, грубо говоря - да, но как я понял у вас нету hover в css

Ankhena, сожмите и экран до любого размера и нажмите на бтн

[Ruslan]

Ankhena,

[Максим]

Ruslan, насчёт ховер исправил

[Ruslan]

Максим Ленский, да, у вас в примере такой проблемы нету, но еще один недочет, мне нужно чтобы до нажатия были обычные полосы, а сжимались при ховере.. И так у меня с любым интерактивным элементом на странице...

[Ruslan]

Максим Ленский, то есть должно работать так-же как в примере моем на codepen в десктопном разрешении. Но при ресайзе ховер не пропадает

[Максим]

Ruslan, это всё тоже так же реализуется на css - дальше делать не буду ...

[Ruslan]

Максим Ленский, но может тогда объясните в чем проблема у меня?

[Ankhena]

Ruslan, пока мышка над крестиком да, убираешь - черный.
У вас так в CSS и написано.

Разумный вариант:
Во-первых, кнопки семантически это button.
Во-вторых, разумнее один раз менять класс у кнопки, чем стилизовать что-то через js.
Тогда вы сможете изменить hover для того класса который отвечает за крестик.

[Ruslan]

Ankhena, в декстопной версии да - убрать мышку ховер пропал. Так и нужно, но если сжать размер например до 500px, то после клика крестик будет в ховер эффекте, а должен быть черный

[Ruslan]

Ankhena, насчет семантики - да, соглашусь. Но на странице есть и баттоны и просто ссылки, которые при ховере подчеркиваются. Абсолютно все элементы в измененном разрешении после клика приобретают ховер, который уберется только если кликнуть где нибудь на странице

[Ankhena]

Ruslan, так..
Вы не уменьшаете окно браузера, а смотрите в эмуляции мобилки?
Логично, на мобилках нет ховера и его стили срабатывают при клике. Всё так.
Можете убрать/переписать hover для мобилок.
https://webformyself.com/css-hover-na-sensornyx-ek... и далее

[Ruslan]

Ankhena, Да, спасибо) Я знал, что на мобилках нет ховера, но думал, что он просто не будет срабатывать. Спасибо за статью, кажется это то, что нужно!

[Ankhena]

Ruslan, угу, как кофе наконец поступил в мозг, так и поняла, что вы творите ))