阻止将鼠标悬停在内部元素上？

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>