Как изменить свойства одного элемента HTML при наведении на другой?

Рейтинг: -1Ответов: 2Опубликовано: 07.02.2023

Есть менюшка. При наведении снизу появляется полоса. Если нажать на меню, то открывается страница и этот элемент меню должен быть подчеркнут. Как сделать, чтобы при наведении на следующие элементы меню убиралось подчеркивание с первого элемента?

ul{
    font-family: Montserrat, serif;
    font-weight: 300;
    font-size: 18px;
    color: #989898;
    grid-column: header;
    list-style-type: none;
}

li{
    display: inline;
    position: relative;
    margin: 0;
    padding: 20px 0 8px 29px;
    height: 20px;
}
li.active-line::after{
    content: "";
    position: absolute;
    left: 7%;
    bottom: 0;
    width: 37px;
    height: 2px;
    transform: translateX(23px);
    background: black;
    z-index: -1;
}

li:hover::after{
    content: "";
    position: absolute;
    left: 7%;
    bottom: 0;
    width: 37px;
    height: 2px;
    transform: translateX(23px);
    background: black;
    z-index: -1;
}

a{
    text-decoration: none;
    cursor: pointer;
    color: #989898;
}
<div class="header">
    
    <ul>
        <a  href="../About_us/about_us.html"><li class="active-line">about us</li></a>
        <a href="../Services/services.html"><li>services</li></a>
        <a href="../Work/work.html"><li>works</li></a>
        <a href="../Blog/blog.html"><li>blog</li></a>
        <a href="../Contact/contact.html"><li>contact</li></a>
    </ul>
</div>

1

2

css html hover
Источник: Stack Overflow на русском

Ответы

▲ 2Принят

Как сделать чтобы при наведении на следующие элементы меню, убиралось подчеркивание с первого элемента?

Предложу такой вариант...

ul{
    font-family: Montserrat, serif;
    font-weight: 300;
    font-size: 18px;
    color: #989898;
    grid-column: header;
    list-style-type: none;
}

li{
    display: inline;
    position: relative;
    margin: 0;
    padding: 20px 0 8px 29px;
    height: 20px;
}
li.active-line::after{
    content: "";
    position: absolute;
    left: 7%;
    bottom: 0;
    width: 37px;
    height: 2px;
    transform: translateX(23px);
    background: black;
    z-index: -1;
}
ul:hover li.active-line::after{
  display: none;
}
ul:hover li.active-line:hover::after{
  display: block;
}
ul:hover li:hover::after,
li:hover::after{
    content: "";
    position: absolute;
    left: 7%;
    bottom: 0;
    width: 37px;
    height: 2px;
    transform: translateX(23px);
    background: black;
    z-index: -1;
}

a{
    text-decoration: none;
    cursor: pointer;
    color: #989898;
}
<div class="header">
    
    <ul>
        <a  href="../About_us/about_us.html"><li class="active-line">about us</li></a>
        <a href="../Services/services.html"><li>services</li></a>
        <a href="../Work/work.html"><li>works</li></a>
        <a href="../Blog/blog.html"><li>blog</li></a>
        <a href="../Contact/contact.html"><li>contact</li></a>
    </ul>
</div>

▲ 1

Вы как-то так хотели?

let header = document.querySelector('.header')
let headerList = header.querySelector('ul')
let headerItems = headerList.querySelectorAll('li')
let activeLineSelector = 'li.active-line'
let prevActiveLineSelector = 'li[data-was-active-line="1"]'

for (let i = 0; i < headerItems.length; i++) {
  let item = headerItems[i]

  item.addEventListener('mouseenter', () => {
    let isActive = item.classList.contains('active-line')

    if(!isActive) {
      let active = headerList.querySelector(activeLineSelector)
      active.dataset.wasActiveLine = 1
      active.classList.remove('active-line')
      item.classList.add('active-line')
    }
  })

  item.addEventListener('mouseleave', () => {
    let prevActive = headerList.querySelector(prevActiveLineSelector)

    if(prevActive) {
      let active = item
      active.dataset.wasActiveLine = 0
      active.classList.remove('active-line')
      prevActive.classList.add('active-line')
    }
  })
}
ul {
    font-family: Montserrat, serif;
    font-weight: 300;
    font-size: 18px;
    color: #989898;
    grid-column: header;
    list-style-type: none;
}

li {
    display: inline;
    position: relative;
    margin: 0;
    padding: 20px 0 8px 29px;
    height: 20px;
}
li.active-line::after, li:hover::after {
    content: "";
    position: absolute;
    left: 7%;
    bottom: 0;
    width: 37px;
    height: 2px;
    transform: translateX(23px);
    background: black;
    z-index: -1;
}

a {
    text-decoration: none;
    cursor: pointer;
    color: #989898;
}
<div class="header">
    <ul>
        <a  href="../About_us/about_us.html"><li class="active-line">about us</li></a>
        <a href="../Services/services.html"><li>services</li></a>
        <a href="../Work/work.html"><li>works</li></a>
        <a href="../Blog/blog.html"><li>blog</li></a>
        <a href="../Contact/contact.html"><li>contact</li></a>
    </ul>
</div>