能否用CSS或jQuery实现鼠标悬停时修改其他元素的CSS样式？

这个需求完全可以实现，下面提供两种可行方案：

一、纯CSS方案（推荐，无需JS） #

你的CSS写法存在语法错误，CSS不支持嵌套选择器（除非用预处理器如Sass），且需要通过后代选择器准确定位子元素。结合你的HTML结构，修正后的代码如下：

修正后的CSS #

/* 默认隐藏子菜单项 */
li.menu-sub-item {
  display: none;
}

/* 鼠标悬停在.menu-item时，显示其下的.menu-sub-item */
li.menu-item:hover .sub-menu .menu-sub-item {
  display: block;
}

修正后的HTML（修复结构错误：<a>不能直接放在<ul>内） #

<div class="menu-main-menu">
  <li class="menu-item">
    <a href="https://www.test.com">Home</a>
    <ul class="sub-menu">
      <li class="menu-sub-item">
        <a href="https://www.test.com">Profil</a>
      </li>
    </ul>
  </li>
</div>

选择器说明：

• li.menu-item:hover：选中处于鼠标悬停状态的.menu-item元素
• .sub-menu .menu-sub-item：定位到.menu-item下的.sub-menu容器内的.menu-sub-item后代元素

二、JavaScript方案（适用于元素无父子/兄弟关联的场景） #

如果触发悬停的元素和要修改的元素没有层级关联，可以通过JS监听鼠标事件实现：

const hoverTrigger = document.querySelector('.menu-item');
const targetElement = document.querySelector('.menu-sub-item');

hoverTrigger.addEventListener('mouseover', () => {
  targetElement.style.display = 'block';
});

hoverTrigger.addEventListener('mouseout', () => {
  targetElement.style.display = 'none';
});

内容的提问来源于stack exchange，提问作者Rismo