CSS

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 添加 class，并在悬停移除时删除 class。

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

 #sidemenu
 {
 display:none;
 }

 #sidemenu.hover
 {
 display:block;
 }

这段 css 通常会隐藏 #sidemenu，但在添加 class hover 时会显示它。

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