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类时会显示它。