div 悬停不适用于每个浏览器 [关闭]答案

【问题标题】：Div hover is not working in every browser [closed]div 悬停不适用于每个浏览器 [关闭]
【发布时间】：2018-12-06 01:18:52
【问题描述】：

这是我正在使用的页面：https://books.fcostry.cz/

我想要做的是在左上方 (.vc-headerlogo) 的图书徽标悬停时隐藏搜索框 (.vc-searchbox)。

.vc-headerlogo:hover .vc-searchbox{ display:none; } 不工作，我真的不知道为什么。

我想使用 CSS 来实现，但我愿意接受任何解决方案。感谢您的任何回答。

【问题讨论】：

请先阅读How to Ask和minimal reproducible example，然后相应地编辑您的问题。
提供代码而不是链接到其他地方。发帖前阅读stackoverflow.com/help/how-to-ask
我们也不知道为什么它在没有看到您已经尝试过的任何 CSS 的情况下无法正常工作。所以添加一个你已经拥有的代码 sn-p 以便我们可以帮助你
“不工作，我真的不知道为什么” - 因为你的搜索框不是你的标志的后代，但只有这样的星座才是您的选择器首先匹配的星座。去研究如何根据一个元素是另一个元素的兄弟来选择元素。

【解决方案1】：

  .vc-headerlogo:hover .vc-searchbox{display:none;}

表示.vc-searchbox嵌套在.vc-headerlogo在覆盖.vc-headerlogo时不会显示

在您的页面中，情况并非如此：.vc-searchbox 不在.vc-headerlogo 中，而是在之后（它们是兄弟）。在这种情况下，使用 CSS 兄弟选择器 +

换句话说，

  .vc-headerlogo:hover+.vc-searchbox{display:none;}

应该会更好

【讨论】：

谢谢，它有效！那么如果我想在页脚中使用 div class="inner" 做同样的事情呢？我应该使用哪个选择器？
不可能，页脚离.vc-headerlogo 太远了（如果这是问题的话）。太远意味着页脚是.vc-headerlogo 的父级的兄弟。 CSS 允许定位后代或兄弟姐妹之后。 CSS 不允许以父级或上一个兄弟级为目标。在这种情况下，您将不得不考虑使用 JS 解决方案。

【解决方案2】：

既然你对选项持开放态度，请使用 jQuery

$(document).ready(function(){
  $('.vc-headerlogo').hover(function(){
  $('.vc-searchbox').hide();
   });
});

【讨论】：