Блок парения на внутренних элементах?

Question

Блок псевдокласса "зависания" на внутренних элементах.При наведении на внутренний элемент он не должен работать.Как это реализовать?

.link:hover {
  background: #499a75;
}

<a href="#" class="link">
  Test
  <ul>
    <li>1</li>
    <li>2</li>
  </ul>
</a>

Answer 1

С помощью javascript вы можете проверить, является ли цель события точно тем же элементом, к которому вы хотите применить эффект.Если да, добавьте класс, а если нет, удалите его.

var anchor = document.querySelectorAll('a.link')[0];
anchor.addEventListener('mouseover', hoverin, false);
anchor.addEventListener('mouseout', hoverout, false);

function hoverin(event) {
    if(event.target === anchor) {
        anchor.classList.add('hover');
    }
    else {
        hoverout();
    }
}

function hoverout() {
    anchor.classList.remove('hover');
}

.link.hover {
  background: #499a75;
}

<a href="#" class="link">Test
    <ul>
        <li>1</li>
        <li>2</li>
    </ul>
</a>