Не применяются стили к ссылкам?

Question

[Qurel]

В выпадающем меню есть эффект наведения - перемещающийся блок span.highlight. При клике на ссылку он появляется, при клике на другую ссылку - перемещается. Проблема в том, что когда я закрываю выпадающее меню, он не пропадает, пробовала разные варианты условии, ничего не помогает. Вторая проблема ссылка всегда наxодится под span и цвет текста перекрывается. Не помогает position: relative и z-index.

https://kristina3531.github.io/Tegratech

Comments

[Андрей]

ничего не понятно про какие ссылки речь. запишите поведение с экрана и опишите баг

[Qurel]

[sumrakx]

Добавь ивент отслеживающий закрытие окна и удаляй элемент. Не знаю что за либу ты юзаешь но похоже это li элемент.

[Qurel]

Как сделать чтобы span не перекрывал текст ссылки? Я сделала ссылку position: relative, z-index: 99 и не помогает, span все равно перекрывает ее.

[Qurel]

sumrakx, Как сделать, чтобы отслеживал, что если класс opened или show-menu отсутствует, то элемент скрывался. Пробовала такие варианты, ничего не помогает:

if($('.toggle').not('.show-menu')) {
        highlights.style.opacity = '0';
    } else {
        highlights.style.opacity = '1';
    }

if($('.toggle').not($('.show-menu'))) {
        highlights.style.opacity = '0';
    } else {
        highlights.style.opacity = '1';
    }

if($('.toggle.show-menu')) {
        highlights.style.opacity = '1';
    } else {
        highlights.style.opacity = '0';
    }

if($('.toggle').hasClass("show-menu")) {
        highlights.style.opacity = '1';
    } else {
        highlights.style.opacity = '0';
    }

if(!$('.toggle').hasClass("show-menu")) {
        highlights.style.opacity = '0';
    } else {
        highlights.style.opacity = '1';
    }

Вот разметка и стили:

.toggle
        .toggle-menu
          span.toggle-text Меню
          .toggle-btn
            span.line.line-top
            span.line.line-middle
            span.line.line-bottom
        nav.toggle-dropdown
          .toggle-dropdown__item
            a.toggle-dropdown__link(href="#") Оборудование
          .toggle-dropdown__item
            a.toggle-dropdown__link(href="#") Программное обеспечение

.toggle {
  display: none;

  &.show-menu {
      
    .toggle-dropdown {
      width: 290px;
      height: auto;

      &__item {
        animation: menu 0.3s ease-in-out forwards;

        
        &:nth-child(1) {
          animation-delay: 0.2s;
        }
       
      }

    }
  }

  &-menu {
    @extend .btn;
    padding: 0 15px;
    border: 1px solid $white;
    cursor: pointer;
    display: flex;
    align-items: center;

    &.opened {
  
      .line-top {
        transform: rotate(45deg) translate(3px);
      }
  
      .line-middle {
        transform: rotate(495deg) translate(1px);
      }
  
      .line-bottom {
        transform: rotate(45deg);
        opacity: 0;
      }
  
    }

  }
  
  }

  &-dropdown {
    position: absolute;
    z-index: 2;
    padding-top: 14px;
    overflow: hidden;
    width: 100%;
    height: 0;
    border-radius: 4px;
    
    &__item {
      opacity: 0;
      transform-origin: top center;
      background-color: $footer-bg;
      border: 1px solid lighten($footer-bg, 25%);
      border-bottom-style: none;
      transition: all linear .3s;
      &:last-child {
        border-bottom-style: solid;
      }
      &:first-child {
        &::before, &::after {
          content: '';
          position: absolute;
          width: 0;
          height: 0;
          border-style: solid;
          transition: all linear .3s;
        }
        &::before {
          top: -8px;
          left: 10px;
          border-width: 0 6px 8px 6px;
          border-color: transparent transparent lighten($footer-bg, 25%) transparent;
        }
        &::after {
          top: -6px;
          left: 12px;
          border-width: 0 4px 7px 4px;
          border-color: transparent transparent $footer-bg transparent;
        }
      }
    }

    &__link {
      display: block;
      padding: 10px 15px;
      position: relative;
      z-index: 99;
    }

  }
}

На скобки не обращай внимание, я может какие-то удалила при редактировании, просто xочу показать стили, чтобы было представление

[Qurel]

sumrakx, Вот так заработало:

$('.toggle-menu').on('click', function() {
        $('.toggle').toggleClass('show-menu');

        if($('.toggle').not('.show-menu')) {
            highlights.style.opacity = '0';
        } else {
            highlights.style.opacity = '1';
        }
        
    });

Я не понимаю почему этот спан перекрывает ссылку, мне надо чтобы цвет текста не перекрывался, был белым

[Владимир]

Qurel, поставьте z-index:1000000, если поможет - уменьшайте, чтобы этот элемент не перекрыл собой что-то такое, чего перекрывать не нужно.

[Вероника]

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

.toggle-dropdown {
    position: absolute;
    z-index: 2;
}

имеет такой же индекс, как у span.highlight
но даже если поставить ему индекс меньше, будет тоже самое, а если больше, то ваш span не будет виден

[Qurel]

z-index:1000000 не помогает, есть какой-то способ заставить текст быть выше span?

[Вероника]

Qurel, только если текст будет отдельно от бэкграунда идти

[Qurel]

Текст идет в ссылке от выпадающего меню .toggle-dropdown.
Span - это элемент, который создается в body и при наведении/клике на ссылку перемещается и принимает те же размеры, при наведении у меня получилось сделать текст выше этого span, а при клике не получается - span всегда выше.
Вот стили для span:

.highlight {
  transition: all 0.5s;
  border-bottom: 2px solid rgba($accent-color3, .6);
  position: absolute;
  z-index: 2;
  top: 0;
  background: rgba($accent-color3, .6);
  left: 0;
  display: block;
  border-radius: 4px;
}

Так он создается и потом перемещается на наведенную ссылку:

//Add nav-link hover animation
    const triggers = $('.nav-menu__link');
    const highlight = document.createElement('span');
    highlight.classList.add('highlight');
    $('body').append(highlight);
triggers.on('mouseenter', function() {
        highlight.style.opacity = '1';
        const linkCoords = this.getBoundingClientRect();
        console.log(linkCoords);

    const coords = {
        width: linkCoords.width,
        height: linkCoords.height,
        top: linkCoords.top + window.scrollY,
        left: linkCoords.left + window.scrollX
    };

    highlight.style.width = `${coords.width}px`;
    highlight.style.height = `${coords.height}px`;
    highlight.style.transform = `translate(${coords.left}px, ${coords.top}px)`;
    });

    triggers.on('mouseleave', function() {
        highlight.style.opacity = '0';
    });

На кликнутую ссылку:

//Add .toggle-dropdown__link onclick animation
    const trigger = $('.toggle-dropdown__link');
    const highlights = document.createElement('span');
    highlights.classList.add('highlight');
    $('body').append(highlights);
   trigger.on('click', function() {
        highlights.style.opacity = '1';
        const linkCoord = this.getBoundingClientRect();
        console.log(linkCoord);

    const coords = {
        width: linkCoord.width,
        height: linkCoord.height,
        top: linkCoord.top + window.scrollY,
        left: linkCoord.left + window.scrollX
    };

    highlights.style.width = `${coords.width}px`;
    highlights.style.height = `${coords.height}px`;
    highlights.style.transform = `translate(${coords.left}px, ${coords.top}px)`;

    });

Answer 1

[Вероника]

Зачем вы делаете это отдельным блоком? Повесьте событие `:hover` либо `:focus` (который по клике срабатывает) на ссылки

.toggle-menu__link:hover {
    background-color: rgba(79, 54, 173, 0.6);
}

Comments

[Qurel]

у меня этот блок перемещается: https://kristina3531.github.io/Tegratech/

[Вероника]

Qurel, вместо отдельного блока повесьте псевдокласс. Вы же понимаете, когда скидываете ссылку, что там не показывается этот блок сразу?)