Div悬停不适用于所有浏览器

Question

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

我想做的是将鼠标悬停在左上角（.vc-searchbox）上书徽标的搜索框（.vc-headerlogo）。

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

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

Answer 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;}

应该更好地工作

Answer 2

由于您愿意接受各种选择，因此请使用jQuery

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