CSS - 当一个元素都属于不同的 div 时，通过将鼠标悬停在另一个元素上来影响它们

Question

是否可以通过将鼠标悬停在属于另一个 div 的元素上来影响放置在 div 中的元素？

我可以使用通用同级选择器让它工作，但前提是我悬停在其上的元素未放置在任何其他元素内。这是唯一可以做到的方法吗？

编辑:我真的不想让你厌倦所有的细节，但是，是的，也许我应该首先包含一些标记。所以，这里是(过度)简化的:

 <nav>
  <button></button>
 </nav>

<div id="sidemenu">
 <ul class="nav">
  <li>Link 1</li>
  <li>Link 2</li>
 </ul>
</div>

在小型设备上，侧边菜单将被隐藏，按钮元素将出现。将鼠标悬停在后者上会使侧边菜单重新显示为下拉菜单。至少那是个主意。我真的不觉得更改标记是正确的，所以我想我需要找到另一种方法来做到这一点。

Answer 1

这是不可能的。您可以让子元素响应父元素上的悬停，但不可能让完全不同的元素响应另一个随机元素上的悬停。

仅使用 CSS 即可。如果你添加一点 javascript/jQuery，这是可能的。例如，您可以使用 jQuery 中的悬停功能。

//edited
$('button').hover(function () {
     $('#sidemenu').addClass('hover');
}, 
function () {
     $('#sidemenu').removeClass('hover');
});  

这基本上是在将鼠标悬停在 #element 上时向 #other-element 添加一个类，并在悬停移除时删除该类。

编辑:我更新了代码以匹配您的标记。在这种情况下，将鼠标悬停在按钮上会向侧边菜单添加一个类。然后，您可以像这样设置侧边菜单的样式:

 #sidemenu
 {
 display:none;
 }

 #sidemenu.hover
 {
 display:block;
 }

这段 css 通常会隐藏 #sidemenu，但在将类 hover 添加到其中时会显示它。