当光标离开子元素悬停父元素时，如何防止鼠标悬停在父元素上？

要防止鼠标悬停在父元素上，可以通过使用CSS的:hover伪类和JavaScript事件处理来实现。

1. 使用CSS的:hover伪类： 可以通过设置父元素的pointer-events属性为none来阻止鼠标事件的触发，从而实现防止鼠标悬停在父元素上。具体步骤如下：

• 在父元素的CSS样式中添加pointer-events: none;属性。
• 这样当鼠标悬停在子元素上时，父元素将不再接收鼠标事件，从而防止鼠标悬停在父元素上。

示例代码：

.parent-element {
  pointer-events: none;
}

1. 使用JavaScript事件处理： 可以通过监听子元素的鼠标移入事件和父元素的鼠标移出事件，来实现防止鼠标悬停在父元素上。具体步骤如下：

• 使用JavaScript获取父元素和子元素的DOM对象。
• 监听子元素的鼠标移入事件，当子元素触发鼠标移入事件时，设置父元素的pointer-events属性为none。
• 监听父元素的鼠标移出事件，当父元素触发鼠标移出事件时，设置父元素的pointer-events属性为auto。

示例代码：

var parentElement = document.querySelector('.parent-element');
var childElement = document.querySelector('.child-element');

childElement.addEventListener('mouseenter', function() {
  parentElement.style.pointerEvents = 'none';
});

parentElement.addEventListener('mouseleave', function() {
  parentElement.style.pointerEvents = 'auto';
});

以上是两种常见的防止鼠标悬停在父元素上的方法，具体选择哪种方法取决于具体的需求和场景。